<template>
  <div class="relationLayout">
    <div class="menubar-pane">
      <div class="content">
        <ul class="menu-top">
          <li class="search" @click="handleShowSearch">
            <a :class="[{showOpacity:showOpacity}]">
              <p>
                <span class="fa fa-search" style="font-size:19px"></span>
              </p>
              <span>搜索</span>
            </a>
          </li>
          <li class="workspaces" @click="handleShowCase">
            <a :class="[{showCaseOpacity:showCaseOpacity}]">
              <p>
                <span class="fa fa-list" style="font-size:19px"></span>
              </p>
              <span>分组</span>
            </a>
          </li>
          <!--<li class="workspaces" @click="handleShowRelations">-->
          <!--<a :class="[{showRelationOpacity:showRelationOpacity}]">-->
          <!--<p>-->
          <!--<svg-icon style="font-size: 20px;" icon-class="work" class-name="card-panel-icon"/>-->
          <!--</p>-->
          <!--<span>分析</span>-->
          <!--</a>-->
          <!--</li>-->
          <li class="divider"></li>
        </ul>

      </div>
    </div>

    <div @contextmenu.prevent="showMenu" id="relationBox" @dragover="allowDrop($event)" @drop="drop" @dragover.prevent style="overflow:hidden;width: 100%;height: 100%"></div>

    <!--详情-->
    <div class="detail-pane ui-resizable" :class="[{visible:showDetails}]">
      <div class="content">
        <div class="type-content org-visallo-layout-root" style="flex-direction: column;display: flex;">
          <div class="detail-pane-head">
            <div class="detail-text-left">
              <p>{{nodesParmas.showName ? nodesParmas.showName : nodesParmas.displayname}}</p>
              <p>{{nodesParmas.name}}</p>
            </div>
            <div class="detail-pane-right" :style="{backgroundImage: `url(${nodesParmas.image})`}"></div>
          </div>

          <!--属性添加按钮-->
          <div class="org-visallo-toolbar">
            <ul>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>查看</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">

                    <a href="javascript:;">
                      查看
                      <div class="subtitle">
                        在新窗口/标签中打开
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>属性</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="getproperty(nodesParmas.objecturi)">
                    <a href="javascript:;">
                      属性
                      <div class="subtitle">
                        向实体添加属性
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu  pull-right no-event">
                <a href="javascript:;" class="icon">
                  <strong style="">&nbsp;</strong>
                </a>
                <ul>
                  <li class=" requires-EDIT" data-event="deleteItem" @click="handleDeleteNode">
                    <a>
                      移除实体
                      <div class="subtitle">从画布中移除</div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>

          <!--属性信息选择添加-->
          <div class="overflow-layout" style="flex: 1 1 auto; overflow: auto; position: relative;">
            <div class="property-input">
              <div class="form" v-if="showSelect">
                <el-form ref="addAttribute" :model="addAttribute">
                  <el-form-item>
                    <el-select style="width: 100%;" size="small" v-model="addAttribute.propertyUri" @change="handleChoosePropertyUri(addAttribute.propertyUri)" placeholder="请选择属性">
                      <el-option v-for="(itemObj,index) in findOperateListModelAll" :label="itemObj.displayname" :value="itemObj.propertyUri" :key="index"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入经度" v-model="addAttributeSave.latitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入纬度" v-model="addAttributeSave.longitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入描述" v-model="addAttributeSave.address"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'DateTime'">
                    <el-date-picker v-model="addAttributeSave.value" type="datetime" style="width: 100%;" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'String'">
                    <el-input :placeholder="`请输入${addAttribute.name}`" v-model="addAttributeSave.value"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: right">
                    <el-button size="small" @click="handleCannel">取消</el-button>
                    <el-button size="small" type="primary" @click="handleCreateAttr()">立即创建</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <div class="table-attribute">
                <table>
                  <tr v-for="item in propertyList">
                    <td class="property-name" colspan="1">{{item.propertyName}}</td>
                    <td class="property-value" colspan="2">
                      <div v-if="item.propertyType == 'TimeInterval'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}</span>
                        </p>
                      </div>
                      <div v-else-if="item.propertyType == 'GisData'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.address}} , {{itemValue.value.longitude}} , {{itemValue.value.latitude}}</span>
                        </p>
                      </div>
                      <div v-else>
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value}}</span>
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

              <div style="padding-left: 15px;padding-right:5px;background-color: #FFF">
                <el-collapse>
                  <el-collapse-item title="相关账号" name="socialdynamic" v-if="socialaccount.length != 0">
                    <div v-for="item in socialaccount" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.description}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="相关动态" name="dynamicCondition" v-if="dynamicCondition.length != 0">
                    <div v-for="item in dynamicCondition" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <el-collapse-item title="相关人物" name="keyfigures" v-if="keyfigures.length != 0">
                    <div v-for="item in keyfigures" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <el-collapse-item title="相关组织" name="focusgroup" v-if="focusgroup.length != 0">
                    <div v-for="item in focusgroup" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--//菜单-->
    <div>
      <div class="dropdown" v-if="cyVisible">
        <ul class="dropdown-menu" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreatEntity">
              新增实体
            </a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handeleChooseLayout('initialize')">
              画布居中
            </a>
          </li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              布局
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('circle')">圆</a></li>
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('grid')">栅格</a></li>
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('breadthfirst')">垂直</a></li>
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('random')">自由布局</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1">
              放大
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('2')">放大2倍</a></li>
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('1')">放大1倍</a></li>
              <li role="presentation"><a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('0.5')">缩放½x</a></li>
            </ul>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation" @click="handleAddDes">
            <a role="menuitem" tabindex="-1">
              快照
            </a>
          </li>
          <!--<li role="presentation" class="divider"></li>-->
          <!--<li role="presentation" @click="handlenewSnapshot2">-->
          <!--<a role="menuitem" tabindex="-1">-->
          <!--保存-->
          <!--</a>-->
          <!--</li>-->
          <!--<li role="presentation" class="divider"></li>-->
          <!--<li role="presentation" @click="handlenewSnapshot1">-->
          <!--<a role="menuitem" tabindex="-1">-->
          <!--保存画布-->
          <!--</a>-->
          <!--</li>-->
        </ul>
      </div>

      <div class="dropdown" v-if="nodesVisible">
        <ul class="dropdown-menu" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreateEdge">
              连接
            </a>
          </li>
          <li role="presentation" v-if="showIsWho">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreateEdge('落地')">
              落地
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">
              查看
            </a>
          </li>

          <li role="presentation" v-if="addGroup">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleAddGroup">
              添加至该分组
            </a>
          </li>

          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              关联
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleFilterListRelation('socialaccount')">关联账号</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleFilterListRelation('socialdynamic')">关联动态</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleFilterListRelation('keyfigures')">关联人物</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleFilterListRelation('focusgroup')">关联组织</a></li>
            </ul>
          </li>
          <li role="presentation" class="divider"></li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              删除
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="deleteEdge()">删除边</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteNode()">移除实体</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteDynamicCondition()">移除关联动态</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetAccountNumber()">移除关联账号</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteFigure()">移除关联人物</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetOrganization()">移除关联组织</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeletedocument()">移除关联文档</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetmedia()">移除关联多媒体</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <!--//添加实体-->
    <div class="dialog-popover" v-if="addNodesVisible" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }" style="position: absolute;">
      <div class="fileImportPopover popover collapseVisibility bottom" style="display: block;">
        <div class="popover-title">创建实体</div>
        <div class="arrow" style="left: 50%;"></div>
        <div class="popover-content show-create-form">
          <el-form ref="form" :rules="formRules" :model="form" label-width="0">
            <el-form-item>
              <el-input size="mini" :readonly="true" @click.stop.native="showTreeFn" placeholder="请选择对象" v-model="form.exampleName" style="position: relative;"></el-input>
              <div class="treeDemo" v-if="showTree" style="display: block;position: absolute;top: 33px;z-index: 23;">
                <el-tree :data="addNode">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span @click="handleGetTreeDate(data)">
                      <img v-if="data.icon" width="15px" style="height: 15px;font-size: 0;position: relative;top: 10px;" :src="data.icon" alt="">
                      <span>{{ node.label }}</span>
                    </span>
                  </span>
                </el-tree>
              </div>
            </el-form-item>
            <el-form-item v-for="(item, index) in findOperateListModel" :key="index" v-if="item.representative == '1'">
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.longitude" :placeholder="`经度`" style="width: 68px"></el-input>
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.latitude" :placeholder="`纬度`" style="width: 68px"></el-input>
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.address" :placeholder="`地理位置描述`" style="width: 120px"></el-input>
              <el-date-picker size="mini" v-if="item.propertyType == 'TimeInterval'" style="width: 45%" v-model="item.timeStart" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-date-picker size="mini" v-if="item.propertyType == 'TimeInterval'" style="width: 45%" v-model="item.timeEnd" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-date-picker size="mini" v-if="item.propertyType == 'DateTime'" v-model="item.value" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-input size="mini" v-if="item.propertyType == 'String'" :placeholder="`请输入${item.displayname}`" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" style="width: 100%" :loading="createLoading" @click="handleSaveEntity">创 建
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!--创建边-->
    <div class="dialog-popover" v-show="addEdgesVisible" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }" style="position: absolute;">
      <div class="fileImportPopover popover collapseVisibility bottom" style="display: block;">
        <div class="popover-title">创建关系</div>
        <div class="arrow" style="left: 50%;"></div>
        <div class="popover-content show-create-form">
          <el-form ref="form" :rules="formRules" :model="form" label-width="0">
            <el-form-item>
              <el-select size="small" style="width: 100%" v-model="createRelationTemp.relation" @change="toggleChooseOrAddRelation()" :disabled="disabledIswho">
                <el-option value="0" label="现有关系">现有关系</el-option>
                <el-option value="1" label="新建关系">新建关系</el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="!vindex">
              <el-select size="small" v-model="createRelationTemp.linkUri" :disabled="disabledIswho" style="width: 100%">
                <el-option v-for="item in getRelationList" :key="item.uri" :value="item.uri" :label="item.displayname"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-show="!vindex" style="margin-bottom: 5px;">
              <el-date-picker size="small" v-model="timeStart" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="!vindex">
              <el-date-picker size="small" v-model="timeEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.displayname" placeholder="请输入中文名称"></el-input>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.uri" placeholder="请输入英文名称"></el-input>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-select size="small" v-model="createRelationTemp.linkDTO.type" style="width: 100%">
                <el-option value="TwoWay" label="双方对等关系">双方对等关系</el-option>
                <el-option value="OneWay" label="单向关系">单向关系</el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.description" placeholder="请输入描述"></el-input>
            </el-form-item>

            <el-form-item v-show="vindex" style="margin-bottom: 5px;">
              <el-date-picker size="small" v-model="timeStart" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="vindex">
              <el-date-picker size="small" v-model="timeEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="mini" style="width: 100%" :loading="createLoading" @click="confirmCreateRelation">创 建
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div>
      <!--搜索-->
      <div class="workspaces-pane" style="left: 0;top: 0;" :class="[{visible:visible}]">
        <div class="content">
          <div class="navbar-search">
            <div style="margin: 15px">
              <el-input size="mini" v-model="keywords" @keyup.enter.native="handleSearch">
                <i style="cursor: pointer" class="el-icon-search el-input__icon" slot="suffix" @click="handleSearch">
                </i>
              </el-input>

              <ul class="search-condition" v-show="!keywordVisible">
                <li class="text-danger">
                  请输入关键字
                </li>
              </ul>

              <ul class="search-condition" v-show="keywordVisible">
                <li v-for="(item, index) in searchParams.keywords" :key="index">
                  <span>{{item}}</span>
                  <i class="el-icon-error" @click="handleDeleteSearch(index)"></i>
                </li>
              </ul>
            </div>

            <ul class="prop-filters">
              <li class="concept-filter-header">
                对象类型
              </li>
              <li>
                <div class="content">
                  <div class="search-options">
                    <el-select v-model="searchParams.objectType" @change="handleObjectType" size="mini">
                      <el-option value="socialaccount" label="实体">实体</el-option>
                      <el-option value="socialdynamic" label="事件">事件</el-option>
                      <el-option value="keyfigures" label="重点人物">重点人物</el-option>
                      <el-option value="focusgroup" label="重点组织">重点组织</el-option>
                    </el-select>
                  </div>
                </div>
              </li>

              <li class="concept-filter-header">
                属性类型
              </li>
              <li>
                <div class="content">
                  <div class="search-options">
                    <el-select v-model="objectTypeCount" size="mini" @change="handleObjectTypeCount">
                      <el-option v-for="item in objectListCount" :key="item.uri" :value="item.uri" :label="item.displayname">
                        {{item.displayname}}
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </li>

              <!--<li class="concept-filter-header">-->
              <!--事件属性类型-->
              <!--</li>-->
              <!--<li>-->
              <!--<div class="content">-->
              <!--<div class="search-options">-->
              <!--<el-select v-model="objectTypeDynamic" size="mini" @change="handleObjectTypeDynamic">-->
              <!--<el-option v-for="item in objectListDynamic" :key="item.uri" :value="item" :label="item.name">-->
              <!--{{item.name}}-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--</div>-->
              <!--</div>-->
              <!--</li>-->

              <li>
                <ul class="search-condition">
                  <li v-for="(item,index) in objectListDynamicChoose" :key="index">
                    <span>{{item.name}}</span>
                    <i class="el-icon-error" @click="hanldeDeleteObjectListDynamic(index)"></i>
                  </li>
                </ul>
              </li>
            </ul>

          </div>
        </div>
      </div>

      <!--搜索结果-->
      <!--:class="[{resultVisible:resultVisible}]"-->
      <div v-show="resultVisible" id="result" class="workspaces-pane result-visible" style="left: 0;top: 0;" :class="[{resultVisible:resultVisible}]">
        <ul class="search-result">
          <li draggable="true" v-for="(item,index) in entryList" :class="[{active:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend" :key="index" @click.shift="handleChooseSearch($event,index)" @click="handleChooseSearchClick($event,index,item)" @click.ctrl="handleChooseSearchCtrl($event,index)">
            <div>
              <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
              </span>
              <span class="search-result-container">
                <span class="search-info">
                  {{item.showName ? item.showName : (item.displayName)}}
                </span>
                <p class="search-info-info">
                  {{item.name}}
                </p>
              </span>
            </div>
          </li>
        </ul>
      </div>

      <!--分组列表-->
      <div class="workspaces-pane" style="left: 0;top: 0;" :class="[{showCase:showCase}]">
        <div class="content">
          <div class="navbar-search">
            <ul class="workspaces-list">
              <li draggable class="w-mine wid-id1" v-for="(item,index) in loadTreeList" :key="item.id" :class="[{active:index == activeNum}]" @click="handleChooseGroupId(index,item.id,item.displayname)">
                <a><i class="fa fa-file-o" style="padding-right: 10px;"></i>{{item.displayname}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--分组结果-->
      <div v-show="groupVisible" id="groupResult" class="workspaces-pane result-visible" style="left: 0;top: 0;" :class="[{groupVisible:groupVisible}]">
        <ul class="search-result">
          <li draggable="true" v-for="(item,index) in groupList" :class="[{groupActive:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend" :key="index" @click.shift="handleChooseSearch1($event,index)" @click="handleChooseSearchClick1($event,index,item)" @click.ctrl="handleChooseSearchCtrl1($event,index)">
            <div>
              <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
              </span>
              <span class="search-result-container">
                <span class="search-info">
                  {{item.showName ? item.showName : (item.displayName)}}
                </span>
                <p class="search-info-info">
                  {{item.name}}
                </p>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <!--分析-->
      <!--<div class="workspaces-pane products-pane" style="left: 0;top: 0;" :class="[{showRelations:showRelations}]">-->
      <!--<div class="content">-->
      <!--<div class="products-container">-->
      <!--<div class="products-list-items">-->

      <!--<div class="" style="position: relative;">-->
      <!--&lt;!&ndash;<div class="products-list-item">&ndash;&gt;-->
      <!--&lt;!&ndash;<el-button type="primary" size="mini" style="width: 100%;margin-bottom: 15px" @click="handlenewSnapshot1">新建</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--<div class="products-list-item"-->
      <!--v-for="(item, index) in getSnapshotList" :class="[{active:index == snapshotActive}]"-->
      <!--@click="handleGetSnapDataById(item.id,index, item.description)">-->
      <!--<div class="buttons">-->
      <!--<el-button type="danger" size="mini" @click.stop="delSnapData(item.id, index)">删除</el-button>-->
      <!--</div>-->
      <!--<div class="preview" :style="{backgroundImage: `url(${item.snapshot})`}">-->

      <!--</div>-->
      <!--<div class="content">-->
      <!--<h1>-->
      <!--<font style="vertical-align: inherit;">-->
      <!--<font style="vertical-align: inherit;">{{item.createTime.split(' ')[0]}}</font></font>-->
      <!--</h1>-->
      <!--<h1>-->
      <!--<font style="vertical-align: inherit;">-->
      <!--<font style="vertical-align: inherit;">{{item.createTime.split(' ')[1]}}-->
      <!--</font>-->
      <!--</font>-->
      <!--</h1>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>

    <div id="timeLine" class="timeLine" style="height: 200px;position:absolute;z-index: 55;background: rgba(0,0,0,0.4);" :class="[{hasShowRelation:showRelations},
                  {hasShowRelation:showCase},
                  {hasShowRelation:visible},
                  {hasShowentryList:resultVisible},
                  {hasShowentryList:groupVisible},
                  {showTimeLint:!showTimeLint}]">
      <p style="position: absolute;top: -55px;">
        {{groupDisplayName}} | <span>{{historyName != 'null' ? historyName : ' '}} </span>
      </p>
      <span @click="handleTimeLint" class="" style="position:absolute;top: -25px;  cursor: pointer;
">时间轴</span>
      <span @click="handleHistorySanp" class="" style="position:absolute;top: -25px; left: 115px;  cursor: pointer;
      ">历史快照</span>

      <span @click="showTimeLint = false" class="toggle-timeline" style="position:absolute;top: -25px; left: 185px;  cursor: pointer;
      ">收缩</span>

      <div v-show="timeLimeVisible" style="height: 200px;" id="container">

      </div>

      <div class="history" v-show="historyVisible">
        <ul class="clearfix">
          <li v-for="(item, index) in getSnapshotList" :class="[{active:index == snapshotActive}]" @click.stop="handelSaveDataTip(item.id,index, item.description)">
            <div class="" style="position: relative;">
              <!--<div class="products-list-item">-->
              <!--<el-button type="primary" size="mini" style="width: 100%;margin-bottom: 15px" @click="handlenewSnapshot1">新建</el-button>-->
              <!--</div>-->
              <div class="products-list-item">
                <div class="buttons">
                  <div style="display:flex;justify-content: center;padding: 0 0 10px 0;">
                    <el-button type="danger" size="mini" @click.stop="delSnapData(item.id, index)">删除</el-button>
                    <el-button type="primary" size="mini" @click.stop="editVisibleSnapData(item.id, index,item.description)">编辑</el-button>
                  </div>
                  <el-button type="success" size="mini" icon="el-icon-download" @click="download(item.snapshot)">下载</el-button>
                </div>
                <div style="height: 100px;background-size:contain;background-repeat: no-repeat;background-position: center;" class="preview preview-other" :style="{backgroundImage: `url(${item.snapshot})`}">

                </div>
                <div class="content">
                  <h1>
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">

                        {{item.description}}
                        <!--<el-input style="position:relative;z-index: 55" size="mini" v-show="item.editDes" @blur.stop="" placeholder="请输入内容" class="input-with-select" v-model="item.description">-->
                        <!--<el-button slot="append" style="background-color: #409EFF;color: #FFF;" size="mini" type="sucess" @click.stop="editSnapData(item.id, item.description,index)">保 存</el-button>-->
                        <!--</el-input>-->
                        <!--<span v-show="!item.editDes">-->
                        <!--{{item.description}}-->
                        <!--</span>-->
                      </font>
                    </font>
                  </h1>
                  <h1>
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">{{item.createTime}}</font>
                    </font>
                  </h1>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :modal-append-to-body='false' title="描述信息" width="30%" :close-on-click-modal="false" :visible.sync="describeVisible">
      <el-form ref="describe" label-width="100px">
        <el-form-item label="描述信息">
          <el-input v-model="describe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="describeVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handlenewSnapshot1" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :modal-append-to-body='false' title="描述信息" width="30%" :close-on-click-modal="false" :visible.sync="describeVisible1">
      <el-form ref="describe1" label-width="100px">
        <el-form-item label="描述信息">
          <el-input v-model="describe1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="describeVisible1 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editSnapData" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import cytoscape from 'cytoscape'
  let edgehandles = require('cytoscape-edgehandles')
  cytoscape.use(edgehandles)
  import echarts from 'echarts'
  import {
    getGraph, // 获取关联图点线信息
    gettree, // 添加节点弹窗的树状图
    findOperateProperties,// 根据对象Uri获得该该对象下所有可操作的属性
    saveExample,// 创建实例
    saveOrUpdate,//保存
    snapshot, // 生成快照
    getSnapshot, // 获取快照
    deletedSnap, // 删除快照
    getSnapDataById,//根据快照ID获取快照数据
    groupIdList,//根据groupId获取分组节点
    confirmEdge,//获取添加的节点与画布上的节点关系
    getdetail,// 实例详细信息
    propertySave,//新增属性
    propertyUpdate,//编辑属性
    listRelationRoeKey,//关联关系返回所有并指定方向
    getOperateLinks,//获得本体编辑页面中所有可选关系
    saveLinkAndRelate2Objects,//新建一条关系，并关联到两个对象中
    saveEdge,//保存边
    relate2Objects,//保存现有边
    removeEdge,//删除边
    addInstance,//添加订阅实例
    groupCountFullText,//获取实体类型和动态类型
    listFullText,//获取列表数组
    filterListRelation,//右击关联数据
  } from '@/api/relationFraph'

  import { getInstance } from '@/api/workBench'
  import {getsubscribeTree} from '@/api/workBench'
  import util from '@/utils'
  import Cookies from 'js-cookie'
  import {formatDateTime, formatDate} from '@/utils/FormatDataH'

  export default {
    name: 'relationGraph',
    data() {
      return {
        describe1:'',
        describeVisible1:false,
        editId:'',
        editDescription:'',
        timeStart:new Date(),
        timeEnd:new Date(),
        describeVisible:false,
        describe:'',
        editDes:false,
        dropData:[],
        chooseResultList:[],
        firstIndex:null,
        secondIndex:null,
        chooseResultList1:[],
        firstIndex1:null,
        secondIndex1:null,
        resultVisible:false,
        groupVisible:false,
        entryList:[],//查询结果
        groupList:[],//分组查询结果
        page_size:20,
        page:1,
        groupActive:null,
        resultVisible:false,
        objectTypeCount: '',//实体属性类型
        objectListCountChoose: [],//实体属性类型
        objectTypeDynamic: {},//事件属性类型
        objectListDynamicChoose: [],//事件属性类型
        keywordVisible: true,//全文检索字段
        objectListCount: [],
        objectListDynamic: [],
        keywords: '',//全文检索字段
        searchParams: {
          curpage: 1,
          keywords: [],
          objectList: [],
          objectType: "socialaccount",
          persize: 20,
          tags: []
        },

        groupCountFullTextParams: {
          "keywords": [],
          "tags": [],
          "objectType": "All",
          "curpage": 1,
          "persize": 10
        },
        focusgroup: [],//组织
        keyfigures: [],//人物
        socialaccount: [],//账号
        dynamicCondition: [],//动态
        addAttributeSHowName: '',
        objecturi: '',//
        rowkey: '',
        deleteLint: '',//删除边
        showTimeLint: true,
        dataTime: [],//时间
        dataData: [],//数据
        chart: null,
        cyVisible: false,//右击画布菜单
        nodesVisible: false,//右击节点显示菜单
        showEdges: false,
        nodeBackground: 'http://scistor.privatedcloud.com:10080/group1/M00/00/07/wKgf21wwTWaAZe_wAAABjHFGQ4k715.png',
        cyCanves: {
          top: null,
          left: null
        },
        relationList: [],
        visible: false,
        analyze: false,
        showCase: false,
        showOpacity: false,
        showCaseOpacity: false,
        showRelationOpacity: false,
        showRelations: false,
        form: {
          exampleName: ''
        },
        loadTreeList: [],//获取分组Id
        activeNum: null,
        addNode: [],//添加实体
        addNodesVisible: false,//添加实体弹框显示
        addEdgesVisible: false,//添加边弹框思显示
        showTree: false,//新增节点加载树下拉框
        formRules: {
          exampleName: [{required: true, message: '请选择对象', trigger: 'change'}],
        },
        disabledIswho:false,
        showIsWho:false,
        showIsWhoVisible:false,
        createLoading: false,
        example: '',
        addnodeVisible: false,//添加实例
        findOperateList: [],
        findOperateListModel: [],
        findOperateListModelAll: [],
        showAddNode: false,//显示创建实体
        layoutId: '',//关联图id
        addAttribute: {},//添加属性
        addAttributeSave: {},//添加属性保存
        propertyList: [],//详情获取属性值
        nodeId: '',
        nodeUri: '',
        targetUri: '',
        targetNode: '',
        getSnapshotList: [],//获取快照
        snapshotActive: null,//显示快照
        groupIdList: [],//获取分组id集合
        cookiesList: [],//获取cookies中的添加到关联图中的集合
        showDetails: false,//显示详情
        saveName: '',//显示类别
        nodesParmas: {},//点击节点对象信息
        showSelect: false,//显示表单
        propertyType: 'add',//属性新增还是修改
        getRelationList: [],
        createRelationTemp: {
          relation: '0',
          linkUri: '',
          linkDTO: {
            uri: '',
            type: 'TwoWay',
            displayname: '',
            description: ''
          }
        },
        vindex: 0,
        firstKeyWord: '',
        secondKeyWord: '',
        canvasId: '',
        resultEdges: [],
        addGroup: false,
        historyName: '',//选择历史数据
        groupDisplayName: '',//分组名称
        timeLimeVisible: false,
        historyVisible: true,
        dragList:{},
        readOnlyParmas:{},//边是否能删除
        firstToGround:'',
        secendToGround:'',
      }
    },
    mounted() {
      let vm = this;
        let el = document.getElementById('result');
        el.addEventListener('scroll', this.handleScroll)

      let el1 = document.getElementById('groupResult');
      el1.addEventListener('scroll', this.handleScroll1)
      vm.initChart()

      vm.cy = cytoscape({
        container: document.getElementById('relationBox'),
        boxSelectionEnabled: true,
        autounselectify: true,
        motionBlur: !1,
        maxZoom: 5,
        minZoom: .1,
        zoom: 0.5,
        wheelSensitivity: 1,//滑动滚轮一次缩放大小
        textureOnViewport: !1,
        style: [{
          selector: 'node',
          style: {
            "content": function (ele) {
              return ele.data('showName') || ele.data('displayName') || ele.data('name')
            },
            "width": function (a) {
              return "Company" == a.data('type') ? 60 : 45
            },
            "height": function (a) {
              return "Company" == a.data('type') ? 60 : 45
            },
            "background-color": function (a) {
              return !a.data('target') ? '#47D2AC' : "Company" == a.data('type') ?
                '#2196F4' : '#EAA829'
            },
            "color": '#333',
            "border-color": function (a) {
              return !a.data('target') ? '#47D2AC' : "Company" == a.data('type') ?
                '#2196F4' : '#EAA829'
            },
            "border-radius": "5px",
            "border-width": 1,
            "text-wrap": "wrap",
            "font-size": 10,
            "font-family": "microsoft yahei",
            "overlay-color": "#fff",
            "overlay-opacity": 0,
            "shape-polygon-points": (10, 10),
            "background-opacity": 1,
            "shape": "ellipse",
            "z-index-compare": "auto",
            'background-fit': 'contain contain',
          }
        },
          {
            selector: 'edge',
            style: {
              // 添加箭头
              "line-style": function (a) {
                return "solid"
              },
              "curve-style": "bezier",
              "control-point-step-size": 20,
              "target-arrow-shape": "triangle",
              "target-arrow-color": function (a) {
                // return a.data("color")
                return '#DCDCDC'
              },
              "arrow-scale": .5,
              "line-color": function (a) {
                // return a.data("color")
                return '#DCDCDC'
              },
              "label": function (a) {
                return a.data("label")
              },
              "text-opacity": .8,
              "font-size": 10,
              "background-color": function (a) {
                return "#333"
              },
              "width": 3,
              "overlay-color": "#fff",
              "overlay-opacity": 0,
              "font-family": "microsoft yahei",
              "z-index-compare": "auto"
            }
          },
          {
            selector: ':selected',
            style: {
              "border-width": 2,
              "border-color": '#333',
              "background-color": 'black',
              "line-color": 'black',
              "target-arrow-color": 'black',
              "source-arrow-color": 'black'
            }
          },
          {
            selector: ".nodeHover", //节点变暗，有悬停效果
            style: {
              "shape": "ellipse",
              "background-opacity": .8
            }
          },
          {
            selector: ".nodeActive",
            style: {
              "border-color": '#4EA2F0',
              "border-width": 10,
              "border-opacity": .5
            }
          },
          {
            selector: ".edgeShow",
            style: {
              "color": "#999",
              "text-opacity": 1,
              "font-weight": 400,
              "label": function (a) {
                return a.data("label")
              },
              "font-size": 10,
              "arrow-scale": .8,
              "width": 1.5,
              "source-text-margin-y": 20,
              "target-text-margin-y": 20,
            },
          },
          {
            selector: ".edgeActive",
            style: {
              "arrow-scale": .8,
              "width": 1.5,
              "color": "#330",
              "text-opacity": 1,
              "font-size": 10,
              "text-background-color": "#fff",
              "text-background-opacity": .8,
              "text-background-padding": 0,
              "source-text-margin-y": 20,
              "target-text-margin-y": 20,
              "z-index-compare": "manual",
              "z-index": 1,
              "line-color": function (a) { //直线颜色
                return "#4EA2F0"
              },
              "target-arrow-color": function (a) { //箭头颜色
                return "#4EA2F0"
              },
              label: function (a) {
                return a.data("label")
              }
            }
          },
          {
            selector: ".edgeDrag",
            style: {
              "arrow-scale": .8,
              "width": 1.5,
              "color": "#330",
              "text-opacity": 1,
              "font-size": 10,
              "text-background-color": "#fff",
              "text-background-opacity": .8,
              "text-background-padding": 0,
              "source-text-margin-y": 20,
              "target-text-margin-y": 20,
              "z-index-compare": "manual",
              "z-index": 1,
              "line-color": function (a) { //直线颜色
                return "#4EA2F0"
              },
              "target-arrow-color": function (a) { //箭头颜色
                return "#4EA2F0"
              }
            }
          },
          {
            selector: ".dull",
            style: {
              "z-index": 1,
              "opacity": .2
            }
          },
          {
            selector: ".nodeClass",
            style: {
              "shape": "round-rectangle",
              "background-color": "#28478D",
              "color": '#333',
              "border-color": "#28478D",
            }
          },
          {
            selector: '.eh-handle',
            style: {
              'width': 0,
              'height': 0,
              'shape': 'ellipse',
              'overlay-opacity': 0,
              'border-opacity': 0
            }
          },

          {
            selector: '.eh-hover',
            style: {
              "shape": "round-rectangle",
              "background-color": "#28478D",
              "color": '#333',
              "border-color": "#28478D",
            }
          },

          {
            selector: '.eh-source',
            style: {
              "shape": "round-rectangle",
              "background-color": "#28478D",
              "color": '#333',
              "border-color": "#28478D",
            }
          },

          {
            selector: '.eh-target',
            style: {
              "shape": "round-rectangle",
              "background-color": "#28478D",
              "color": '#333',
              "border-color": "#28478D",
            }
          },

          {
            selector: '.eh-preview, .eh-ghost-edge',
            style: {
              'background-color': 'red',
              'line-color': 'red',
              'target-arrow-color': 'red',
              'source-arrow-color': 'red',
              "line-style": 'dotted',
            }
          },

          {
            selector: '.eh-ghost-edge.eh-preview-active',
            style: {
              'opacity': 0
            }
          }
        ],
        elements: {
          nodes: [],
          edges: []
        },
        layout: {
          name: 'cose',//用哪种方式排列，可选：breadthfirst(广度优先)、cose(缝制，乱交)、preset(预设)、circle(圆形)、grid(矩形)
          idealEdgeLength: 60,
          nodeOverlap: 20,
          refresh: 20,
          fit: true,
          padding: 30,
          randomize: false,
          componentSpacing: 20,
          nodeRepulsion: 400,
          edgeElasticity: 10,
          nestingFactor: 5,
          animate: true,//出来动画
          gravity: 80,
          numIter: 1000,
          initialTemp: 200,
          coolingFactor: 0.95,
          minTemp: 1.0
        },
      })
      let defaults = {
        preview: true, // whether to show added edges preview before releasing selection
        hoverDelay: 150, // time spent hovering over a target node before it is considered selected
        handleNodes: 'node', // selector/filter function for whether edges can be made from a given node
        snap: false, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
        snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
        snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
        noEdgeEventsInDraw: false, // set events:no to edges during draws, prevents mouseouts on compounds
        disableBrowserGestures: false, // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
        handlePosition: function( node ){
          return 'middle top'; // sets the position of the handle in the format of "X-AXIS Y-AXIS" such as "left top", "middle top"
        },
        handleInDrawMode: false, // whether to show the handle in draw mode
        edgeType: function( sourceNode, targetNode ){
          // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
          // returning null/undefined means an edge can't be added between the two nodes
          return 'flat';
        },
        loopAllowed: function( node ){
          // for the specified node, return whether edges from itself to itself are allowed
          return false;
        },
        nodeLoopOffset: -50, // offset for edgeType: 'node' loops
        nodeParams: function( sourceNode, targetNode ){
          // for edges between the specified source and target
          // return element object to be passed to cy.add() for intermediary node
          return {};
        },
        edgeParams: function( sourceNode, targetNode, i ){
          // for edges between the specified source and target
          // return element object to be passed to cy.add() for edge
          // NB: i indicates edge index in case of edgeType: 'node'
          return {};
        },
        ghostEdgeParams: function(){
          // return element object to be passed to cy.add() for the ghost edge
          // (default classes are always added for you)
          return {};
        },
        show: function( sourceNode ){
          // fired when handle is shown
        },
        hide: function( sourceNode ){
          // fired when the handle is hidden
        },
        start: function( sourceNode ){
          vm.cy.panningEnabled(false)
          vm.cy.userPanningEnabled(true)
          // fired when edgehandles interaction starts (drag on handle)
        },
        complete: function( sourceNode, targetNode, addedEles ){
          // fired when edgehandles is done and elements are added
        },
        stop: function( sourceNode ){
          // fired when edgehandles interaction is stopped (either complete with added edges or incomplete)
        },
        cancel: function( sourceNode, cancelledTargets ){
          // fired when edgehandles are cancelled (incomplete gesture)
        },
        hoverover: function( sourceNode, targetNode ){
          // fired when a target is hovered
        },
        hoverout: function( sourceNode, targetNode ){
          // fired when a target isn't hovered anymore
        },
        previewon: function( sourceNode, targetNode, previewEles ){
          // fired when preview is shown
        },
        previewoff: function( sourceNode, targetNode, previewEles ){
          // fired when preview is hidden
        },
        drawon: function(){
          // fired when draw mode enabled
        },
        drawoff: function(){
          // fired when draw mode disabled
        }
      };
      vm.eh = vm.cy.edgehandles(defaults);
      vm.cy.collection("edge").addClass("edgeShow");

      vm.cy.on("mouseover", "node", function (a) {
        $('#relationBox').css('cursor', 'pointer');
        let c = a.target;
        c.addClass("nodeHover");
        vm.cy.collection("edge").removeClass("edgeActive");
        c.neighborhood("edge").addClass("edgeActive");
      })
      vm.cy.on("mouseout", "node", function (a) {
        $('#relationBox').css('cursor', 'default');
        let c = a.target;
        c.removeClass("nodeHover");
        vm.cy.collection("edge").removeClass("edgeActive");
      })
      vm.cy.on("click", "node", function (a) {
        let c = a.target;
        if (c.data().belongGroup != 'socialdynamic') {
          vm.showIsWho = true
        } else {
          vm.showIsWho = false
        }
        vm.deleteId = c.id()
        if (vm.nodeId) {
          if (vm.showEdges) {
            vm.addEdgesVisible = true;
          }
          vm.targetNode = c.id()
          vm.secendToGround = c.data().belongGroup
          vm.targetUri = c.data()['objecturi'];
          vm.secondKeyWord = c.data()['rowkey']
          vm.cyCanves.top = vm.cy.$(`#${vm.targetNode}`).renderedPosition('y') + 5
          vm.cyCanves.left = vm.cy.$(`#${vm.targetNode}`).renderedPosition('x') - 124
          vm.createRelationTemp = {
            relation: '0',
            linkUri: '',
            linkDTO: {
              uri: '',
              type: 'TwoWay',
              displayname: '',
              description: ''
            }
          }
          vm.vindex = 0
          vm.handleGetRelations()
        } else {
          vm.nodeId = c.id()
          vm.firstToGround = c.data().belongGroup
          vm.nodeUri = c.data()['objecturi'];
          vm.firstKeyWord = c.data()['rowkey']

        }
        if (vm.nodeId && vm.targetNode) {
          if (vm.disabledIswho) {
            if (vm.handleVerify(vm.firstToGround,vm.secendToGround)) {
              vm.disabledIswho = true;
              vm.showIsWho = true
            } else {
              vm.showIsWho = false
              vm.disabledIswho = false;
              vm.addEdgesVisible = false
            }
          }
          if (vm.addEdgesVisible) {
            vm.showEdges = false
          }
          if (vm.nodeId == vm.targetNode) {
            vm.nodeId = '';
            vm.targetNode = '';
            vm.addEdgesVisible = false;
            vm.showEdges = false;
            vm.vindex = 0
            return
          }
        }
        c.removeClass("nodeActive");
        vm.cy.collection("node").removeClass("nodeClass");
        c.addClass('nodeClass')
        vm.cy.collection("edge").removeClass("edgeActive");
      })
      vm.cy.on("vmousedown", "node", function (a) { //监听鼠标左键按下
        let c = a.target;
        vm.cy.collection("edge").addClass('dull');
        vm.cy.collection("node").addClass('dull');
        c.removeClass("dull");
        c.neighborhood("edge").removeClass("dull");
        c.neighborhood("edge").addClass("edgeActive");
        c.neighborhood("edge").connectedNodes().removeClass("dull"); //当前节点的邻域边的边缘节点！

        // c.neighborhood("node").removeClass("dull");//与上面意义相同
      })


      vm.cy.on("tapend", "node", function (a) { //监听鼠标左键释放
        let c = a.target;
        vm.cy.collection("edge").removeClass('dull');
        vm.cy.collection("node").removeClass('dull');
        c.neighborhood("edge").removeClass("edgeActive");
        c.neighborhood("node").removeClass("nodeActive");
        // if (vm.cy.$(`#${c.id()}`).selected()){
        //   console.log(111)
        // } else {
        //   console.log(2222)
        // }
        vm.showDetails = true;
        vm.rowkey = c.data().rowkey
        vm.objecturi = c.data().objecturi
        vm.addAttributeSHowName = c.data();
        vm.saveName = c.data().name;
        vm.nodesParmas = c.data()
        vm.getNodeDetails(c.data().rowkey, c.data().objecturi)
        vm.handleDynamicCondition('socialdynamic')
        vm.handleFocusgroup('focusgroup')
        vm.handleKeyfigures('keyfigures')
        vm.handleAccountNumber('socialaccount')
        vm.showSelect = false;
        vm.addAttributeSave = {};
        vm.addAttribute.propertyType = '';
        vm.addAttribute = {};
      })

      vm.cy.on('dragfree', 'node', function (a) {
        if (vm.showDetails) {
          vm.showDetails = false
        }
      })

      //线
      vm.cy.on("tapstart", "edge", function (a) {
        let c = a.target;
        vm.readOnlyParmas = c.data();
        vm.deleteLint = c.data().id
        vm.cy.collection("edge").removeClass("edgeActive");
        c.addClass("edgeActive")
      })

      //清空线和点class
      vm.cy.on("tapstart", function (a) {
        vm.cyVisible = false
        vm.addNodesVisible = false;
        vm.addEdgesVisible = false;
        vm.showTree = false;
        if (a.target === vm.cy) {
          vm.readOnlyParmas = {},
          vm.cy.collection("node").removeClass("nodeClass");
          vm.cy.collection("edge").removeClass("edgeActive");
          vm.showEdges = false;
          vm.cyVisible = false;
          vm.nodesVisible = false;
          // vm.resultVisible = false;
          // vm.visible = false;
          vm.deleteLint = '';
          // showCaseOpacity showRelationOpacity visible showCase showRelations
          // vm.showOpacity = false;
          // vm.showCaseOpacity = false;
          vm.showRelationOpacity = false;
          // vm.showCase = false;
          // vm.showRelations = false;
          vm.nodeId = '';
          vm.targetNode = '';
          vm.showDetails = false
          vm.targetUri = '';
          vm.secondKeyWord = ''
          vm.createRelationTemp = {
            relation: '0',
            linkUri: '',
            linkDTO: {
              uri: '',
              type: 'TwoWay',
              displayname: '',
              description: ''
            }
          }
          vm.vindex = 0
          vm.nodeUri = '';
          vm.firstKeyWord = ''
        }
      })

      //右击显示菜单
      vm.cy.on("cxttapstart", function (e) {
        let c = e.target;
        vm.cyVisible = true;
        vm.findOperateListModel = [];
        vm.findOperateListModelAll = [];
        vm.findOperateList = [];
        vm.example = ''
        vm.form.exampleName = '';
        if (e.target === vm.cy) {
          vm.cyVisible = true;
          vm.nodesVisible = false;
          vm.addNodesVisible = false
          vm.showTree = false;
          vm.deleteLint = '';
        } else {
          if (c.data().belongGroup != 'socialdynamic') {
            vm.showIsWho = true
          } else {
            vm.showIsWho = false
          }
          vm.cyVisible = false;
          vm.nodesVisible = true;
          vm.addNodesVisible = false
          vm.showTree = false;
          // vm.deleteLint = '';
        }
      })
      //右击节点显示菜单
      vm.cy.on("cxttapstart", "node", function (e) {
        let c = e.target;
        vm.deleteId = c.id()
        vm.nodeId = c.id()
        vm.firstToGround = c.data().belongGroup
        vm.nodeUri = c.data()['objecturi'];
        vm.firstKeyWord = c.data()['rowkey']
        vm.findOperateListModel = [];
        vm.findOperateListModelAll = [];
        vm.findOperateList = [];
        vm.example = '';
        vm.deleteLint = '';
        vm.form.exampleName = '';
        vm.cyCanves.top = vm.cy.$(this).renderedPosition('y') + 5;
        vm.cyCanves.left = vm.cy.$(this).renderedPosition('x') + 5;
        vm.nodesVisible = true;
        vm.cyVisible = false;
        vm.addNodesVisible = false
        vm.showTree = false;
        vm.nodesParmas = c.data()

        vm.rowkey = c.data().rowkey
        vm.objecturi = c.data().objecturi


        vm.showDetails = false
        vm.rowkey = c.data().rowkey
        vm.objecturi = c.data().objecturi
        vm.addAttributeSHowName = c.data();
        vm.saveName = c.data().name;
        vm.nodesParmas = c.data()
        vm.getNodeDetails(c.data().rowkey, c.data().objecturi)
        // vm.handleAccountNumber('entity')
        // vm.handleDynamicCondition('event')
        vm.showSelect = false;
        vm.addAttributeSave = {};
        vm.addAttribute.propertyType = '';
        vm.addAttribute = {};
      })


      vm.cy.on("keyup", "node", function (a) {
        let c = a.target;
        console.log(a)
      })


    },
    methods: {
      //校验落地
      handleVerify(first,second){
        if (first == 'keyfigures' && second == 'socialaccount') {
          return true;
        } else if (first == 'socialaccount' && second == 'keyfigures') {
          return true;
        } else if (first == 'socialaccount' && second == 'focusgroup') {
          return true;
        } else if (first == 'focusgroup' && second == 'socialaccount') {
          return true;
        }else {
          return false
        }
      },
      //搜索接触拖拽到画布
      dragstart (event, data) {
        event.dataTransfer.setData('item', JSON.stringify(data))
      },
      //搜索接触拖拽到画布
      dragend (event) {
        // event.dataTransfer.clearData()
      },

      //搜索接触拖拽到画布
      allowDrop(event){
        event.preventDefault();
      },

      //画布结束拖拽数据
      drop(event){
        let vm = this;
        let allData = vm.cy.json();
        let data = event.dataTransfer.getData('item')
        this.dropData = JSON.parse(data)
        if (this.groupVisible) {
          if (this.chooseResultList1.length != 0) {
            if (this.chooseResultList1.find(item => {return item.rowkey == this.dropData.rowkey})){
              let relationsObjList = [];
              let otherRowkey = []
              if (allData.elements.nodes != undefined) {
                for (let o = 0; o < this.chooseResultList1.length; o++) {
                  let currentIndex = this.chooseResultList1[o];
                  otherRowkey.push(this.chooseResultList1[o].rowkey)
                  if (!allData.elements.nodes.find(item => {return item.data.rowkey == currentIndex.rowkey})) {
                    let relationsObj = {
                      id: '',
                      group: 'nodes',
                      data: {
                        id: currentIndex.rowkey,
                        displayname: currentIndex.displayName,
                        name: currentIndex.name,
                        showName: currentIndex.showName,
                        image: currentIndex.iconUrl,
                        objecttype: currentIndex.objectType,
                        objecturi: currentIndex.objectUri,
                        rowkey: currentIndex.rowkey,
                        twoway: currentIndex.twoway,
                        belongGroup:currentIndex.belongGroup
                      }
                    }
                    relationsObjList.push(relationsObj)
                  }
                }
                vm.cy.add(relationsObjList)
                vm.handleInitializeData()
              } else {
                for (let o = 0; o < this.chooseResultList1.length; o++) {
                  let currentIndex = this.chooseResultList1[o];
                  otherRowkey.push(this.chooseResultList1[o].rowkey)
                  let relationsObj = {
                    id: '',
                    group: 'nodes',
                    data: {
                      id: currentIndex.rowkey,
                      displayname: currentIndex.displayName,
                      name: currentIndex.name,
                      showName: currentIndex.showName,
                      image: currentIndex.iconUrl,
                      objecttype: currentIndex.objectType,
                      objecturi: currentIndex.objectUri,
                      rowkey: currentIndex.rowkey,
                      twoway: currentIndex.twoway,
                      belongGroup:currentIndex.belongGroup
                    }
                  }
                  relationsObjList.push(relationsObj)
                }
                vm.cy.add(relationsObjList)
                vm.handleInitializeData()
              }
              //添加this.chooseResultList到画布

              if (allData.elements) {
                if (allData.elements.nodes != undefined) {
                  let current2 = allData.elements.nodes;
                  let cyNodeRowkey2 = [];
                  for (let k = 0; k < current2.length; k++) {
                    if (current2[k].data) {
                      cyNodeRowkey2.push(current2[k].data.rowkey)
                    }
                  }
                  vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
                } else {
                  vm.handleConfirmEdge(otherRowkey, otherRowkey)
                }
              }

            } else {
              //添加当前实体到画布
              let relationsObj = {
                id: '',
                group: 'nodes',
                data: {
                  id: this.dropData.rowkey,
                  displayname: this.dropData.displayName,
                  name: this.dropData.name,
                  showName: this.dropData.showName,
                  image: this.dropData.iconUrl,
                  objecttype: this.dropData.objectType,
                  objecturi: this.dropData.objectUri,
                  rowkey: this.dropData.rowkey,
                  twoway: this.dropData.twoway,
                  belongGroup:this.dropData.belongGroup
                }
              }
              if (allData.elements) {
                if (allData.elements.nodes != undefined) {
                  let current = [];
                  let cyNodeRowkey = [];
                  if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                    vm.cy.add(relationsObj)
                    vm.handleInitializeData()
                  }
                  let cyData1 = (vm.cy.json()).elements.nodes
                  for (let k = 0; k < cyData1.length; k++) {
                    if (cyData1[k].data) {
                      cyNodeRowkey.push(cyData1[k].data.rowkey)
                    }
                  }
                  vm.handleConfirmEdge(cyNodeRowkey,[this.dropData.rowkey])
                } else {
                  vm.cy.add(relationsObj)
                  vm.handleInitializeData()
                }
              }
            }
          } else {
            //添加当前实体到画布
            let relationsObj = {
              id: '',
              group: 'nodes',
              data: {
                id: this.dropData.rowkey,
                displayname: this.dropData.displayName,
                name: this.dropData.name,
                showName: this.dropData.showName,
                image: this.dropData.iconUrl,
                objecttype: this.dropData.objectType,
                objecturi: this.dropData.objectUri,
                rowkey: this.dropData.rowkey,
                twoway: this.dropData.twoway,
                belongGroup:this.dropData.belongGroup
              }
            }
            if (allData.elements) {
              if (allData.elements.nodes != undefined) {
                let current1 = []
                let cyNodeRowkey1 = [];
                if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                  vm.cy.add(relationsObj)
                  vm.handleInitializeData()
                  current1 = allData.elements.nodes;
                }

                let cyData = (vm.cy.json()).elements.nodes
                for (let u = 0; u < cyData.length; u++) {
                  if (cyData[u].data) {
                    cyNodeRowkey1.push(cyData[u].data.rowkey)
                  }
                }
                vm.handleConfirmEdge(cyNodeRowkey1,[this.dropData.rowkey])
              } else {
                vm.cy.add(relationsObj)
                vm.handleInitializeData()
              }
            }
          }
        } else if (this.resultVisible) {
          if (this.chooseResultList.length != 0) {
            if (this.chooseResultList.find(item => {return item.rowkey == this.dropData.rowkey})){
              let relationsObjList = [];
              let otherRowkey = []
              if (allData.elements.nodes != undefined) {
                for (let o = 0; o < this.chooseResultList.length; o++) {
                  let currentIndex = this.chooseResultList[o];
                  otherRowkey.push(this.chooseResultList[o].rowkey)
                  if (!allData.elements.nodes.find(item => {return item.data.rowkey == currentIndex.rowkey})) {
                    let relationsObj = {
                      id: '',
                      group: 'nodes',
                      data: {
                        id: currentIndex.rowkey,
                        displayname: currentIndex.displayName,
                        name: currentIndex.name,
                        showName: currentIndex.showName,
                        image: currentIndex.iconUrl,
                        objecttype: currentIndex.objectType,
                        objecturi: currentIndex.objectUri,
                        rowkey: currentIndex.rowkey,
                        twoway: currentIndex.twoway,
                        belongGroup:currentIndex.belongGroup
                      }
                    }
                    relationsObjList.push(relationsObj)
                  }
                }
                vm.cy.add(relationsObjList)
                vm.handleInitializeData()
              } else {
                for (let o = 0; o < this.chooseResultList.length; o++) {
                  let currentIndex = this.chooseResultList[o];
                  otherRowkey.push(this.chooseResultList[o].rowkey)
                  let relationsObj = {
                    id: '',
                    group: 'nodes',
                    data: {
                      id: currentIndex.rowkey,
                      displayname: currentIndex.displayName,
                      name: currentIndex.name,
                      showName: currentIndex.showName,
                      image: currentIndex.iconUrl,
                      objecttype: currentIndex.objectType,
                      objecturi: currentIndex.objectUri,
                      rowkey: currentIndex.rowkey,
                      twoway: currentIndex.twoway,
                      belongGroup:currentIndex.belongGroup
                    }
                  }
                  relationsObjList.push(relationsObj)
                }
                vm.cy.add(relationsObjList)
                vm.handleInitializeData()
              }
              //添加this.chooseResultList到画布

              if (allData.elements) {
                if (allData.elements.nodes != undefined) {
                  let current2 = allData.elements.nodes;
                  let cyNodeRowkey2 = [];
                  for (let k = 0; k < current2.length; k++) {
                    if (current2[k].data) {
                      cyNodeRowkey2.push(current2[k].data.rowkey)
                    }
                  }
                  vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
                } else {
                  vm.handleConfirmEdge(otherRowkey, otherRowkey)
                }
              }

            } else {
              //添加当前实体到画布
              let relationsObj = {
                id: '',
                group: 'nodes',
                data: {
                  id: this.dropData.rowkey,
                  displayname: this.dropData.displayName,
                  name: this.dropData.name,
                  showName: this.dropData.showName,
                  image: this.dropData.iconUrl,
                  objecttype: this.dropData.objectType,
                  objecturi: this.dropData.objectUri,
                  rowkey: this.dropData.rowkey,
                  twoway: this.dropData.twoway,
                  belongGroup:this.dropData.belongGroup
                }
              }
              if (allData.elements) {
                if (allData.elements.nodes != undefined) {
                  let current = [];
                  let cyNodeRowkey = [];
                  if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                    vm.cy.add(relationsObj)
                    vm.handleInitializeData()
                  }
                  let cyData1 = (vm.cy.json()).elements.nodes
                  for (let k = 0; k < cyData1.length; k++) {
                    if (cyData1[k].data) {
                      cyNodeRowkey.push(cyData1[k].data.rowkey)
                    }
                  }
                  vm.handleConfirmEdge(cyNodeRowkey,[this.dropData.rowkey])
                } else {
                  vm.cy.add(relationsObj)
                  vm.handleInitializeData()
                }
              }
            }
          } else {
            //添加当前实体到画布
            let relationsObj = {
              id: '',
              group: 'nodes',
              data: {
                id: this.dropData.rowkey,
                displayname: this.dropData.displayName,
                name: this.dropData.name,
                showName: this.dropData.showName,
                image: this.dropData.iconUrl,
                objecttype: this.dropData.objectType,
                objecturi: this.dropData.objectUri,
                rowkey: this.dropData.rowkey,
                twoway: this.dropData.twoway,
                belongGroup:this.dropData.belongGroup
              }
            }
            if (allData.elements) {
              if (allData.elements.nodes != undefined) {
                let current1 = []
                let cyNodeRowkey1 = [];
                if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                  vm.cy.add(relationsObj)
                  vm.handleInitializeData()
                  current1 = allData.elements.nodes;
                }

                let cyData = (vm.cy.json()).elements.nodes
                for (let u = 0; u < cyData.length; u++) {
                  if (cyData[u].data) {
                    cyNodeRowkey1.push(cyData[u].data.rowkey)
                  }
                }
                vm.handleConfirmEdge(cyNodeRowkey1,[this.dropData.rowkey])
              } else {
                vm.cy.add(relationsObj)
                vm.handleInitializeData()
              }
            }
          }
        }

        console.log('data: ', this.dropData)
      },

      //画布结束拖拽数据
      drop1(event){
        let vm = this;
        let allData = vm.cy.json();
        let data = event.dataTransfer.getData('item')
        this.dropData = JSON.parse(data)
        if (this.chooseResultList.length != 0) {
          if (this.chooseResultList.find(item => {return item.rowkey == this.dropData.rowkey})){
            let relationsObjList = [];
            let otherRowkey = []
            if (allData.elements.nodes != undefined) {
              for (let o = 0; o < this.chooseResultList.length; o++) {
                let currentIndex = this.chooseResultList[o];
                otherRowkey.push(this.chooseResultList[o].rowkey)
                if (!allData.elements.nodes.find(item => {return item.data.rowkey == currentIndex.rowkey})) {
                  let relationsObj = {
                    id: '',
                    group: 'nodes',
                    data: {
                      id: currentIndex.rowkey,
                      displayname: currentIndex.displayName,
                      name: currentIndex.name,
                      showName: currentIndex.showName,
                      image: currentIndex.iconUrl,
                      objecttype: currentIndex.objectType,
                      objecturi: currentIndex.objectUri,
                      rowkey: currentIndex.rowkey,
                      twoway: currentIndex.twoway,
                      belongGroup:currentIndex.belongGroup
                    }
                  }
                  relationsObjList.push(relationsObj)
                }
              }
              vm.cy.add(relationsObjList)
              vm.handleInitializeData()
            } else {
              for (let o = 0; o < this.chooseResultList.length; o++) {
                let currentIndex = this.chooseResultList[o];
                otherRowkey.push(this.chooseResultList[o].rowkey)
                let relationsObj = {
                  id: '',
                  group: 'nodes',
                  data: {
                    id: currentIndex.rowkey,
                    displayname: currentIndex.displayName,
                    name: currentIndex.name,
                    showName: currentIndex.showName,
                    image: currentIndex.iconUrl,
                    objecttype: currentIndex.objectType,
                    objecturi: currentIndex.objectUri,
                    rowkey: currentIndex.rowkey,
                    twoway: currentIndex.twoway,
                    belongGroup:currentIndex.belongGroup
                  }
                }
                relationsObjList.push(relationsObj)
              }
              vm.cy.add(relationsObjList)
              vm.handleInitializeData()
            }
            //添加this.chooseResultList到画布

            if (allData.elements) {
              if (allData.elements.nodes != undefined) {
                let current2 = allData.elements.nodes;
                let cyNodeRowkey2 = [];
                for (let k = 0; k < current2.length; k++) {
                  if (current2[k].data) {
                    cyNodeRowkey2.push(current2[k].data.rowkey)
                  }
                }
                vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
              } else {
                vm.handleConfirmEdge(otherRowkey, otherRowkey)
              }
            }

          } else {
            //添加当前实体到画布
            let relationsObj = {
              id: '',
              group: 'nodes',
              data: {
                id: this.dropData.rowkey,
                displayname: this.dropData.displayName,
                name: this.dropData.name,
                showName: this.dropData.showName,
                image: this.dropData.iconUrl,
                objecttype: this.dropData.objectType,
                objecturi: this.dropData.objectUri,
                rowkey: this.dropData.rowkey,
                twoway: this.dropData.twoway,
                belongGroup:this.dropData.belongGroup
              }
            }
            if (allData.elements) {
              if (allData.elements.nodes != undefined) {
                let current = [];
                let cyNodeRowkey = [];
                if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                  vm.cy.add(relationsObj)
                  vm.handleInitializeData()
                }
                let cyData1 = (vm.cy.json()).elements.nodes
                for (let k = 0; k < cyData1.length; k++) {
                  if (cyData1[k].data) {
                    cyNodeRowkey.push(cyData1[k].data.rowkey)
                  }
                }
                vm.handleConfirmEdge(cyNodeRowkey,[this.dropData.rowkey])
              } else {
                vm.cy.add(relationsObj)
                vm.handleInitializeData()
              }
            }
          }
        } else {
          //添加当前实体到画布
          let relationsObj = {
            id: '',
            group: 'nodes',
            data: {
              id: this.dropData.rowkey,
              displayname: this.dropData.displayName,
              name: this.dropData.name,
              showName: this.dropData.showName,
              image: this.dropData.iconUrl,
              objecttype: this.dropData.objectType,
              objecturi: this.dropData.objectUri,
              rowkey: this.dropData.rowkey,
              twoway: this.dropData.twoway,
              belongGroup:this.dropData.belongGroup
            }
          }
          if (allData.elements) {
            if (allData.elements.nodes != undefined) {
              let current1 = []
              let cyNodeRowkey1 = [];
              if (!(allData.elements.nodes).find(item => { return item.data.rowkey == this.dropData.rowkey})) {
                vm.cy.add(relationsObj)
                vm.handleInitializeData()
                current1 = allData.elements.nodes;
              }

              let cyData = (vm.cy.json()).elements.nodes
              for (let u = 0; u < cyData.length; u++) {
                if (cyData[u].data) {
                  cyNodeRowkey1.push(cyData[u].data.rowkey)
                }
              }
              vm.handleConfirmEdge(cyNodeRowkey1,[this.dropData.rowkey])
            } else {
              vm.cy.add(relationsObj)
              vm.handleInitializeData()
            }
          }
        }
        console.log('data: ', this.dropData)
      },

      //分组查询
      handleGroupList(){
        let params = {
          groupId: sessionStorage.getItem('groupId'),
          keyword: '',
          curpage: this.page,
          pagesize: this.page_size
        }
        getInstance(params).then ( (res) =>{
          if (res.status == 200) {
            this.groupList = res.data;
            this.groupList.forEach(v => {
                            if (v.personIconUrl) {
                                v.iconUrl = v.personIconUrl
                            }
                        })
            for (let i= 0; i < this.groupList.length; i++) {
              this.groupList[i].active = false
            }
            // this.groupVisible = true;
            // this.showCase= true
            // this.showCaseOpacity = true
          } else {
            this.$message.error(res.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        })
        // groupList
      },

      //查询后点击效果
      handleChooseSearch(e,_index){
        for (let i = 0; i < this.entryList.length; i++) {
          this.entryList[i].active = false;
        }
        if (this.firstIndex) {
          this.secondIndex = _index
        } else {
          this.firstIndex = _index
          this.entryList[_index].active = true;
        }
        this.chooseResultList = []
        if ((this.firstIndex && this.secondIndex) || (this.firstIndex == 0 && this.secondIndex) || (this.firstIndex == 0 && this.secondIndex == 0)  || (this.firstIndex && this.secondIndex == 0)) {
          if (this.firstIndex > this.secondIndex) {
            // chooseResultList
            for (let n = 0; n < this.entryList.length; n++) {
              if (n >= this.secondIndex && n <= this.firstIndex) {
                this.chooseResultList.push(this.entryList[n]);
                this.entryList[n].active = true;
              }
            }
          } else if (this.firstIndex < this.secondIndex) {
            for (let m = 0; m < this.entryList.length; m++) {
              if (m >= this.firstIndex && m <= this.secondIndex) {
                this.chooseResultList.push(this.entryList[m]);
                this.entryList[m].active = true;
              }
            }
          } else if (this.firstIndex == this.secondIndex) {
            for (let l = 0; l < this.entryList.length; l++) {
              if (l == this.firstIndex) {
                this.chooseResultList.push(this.entryList[l]);
                this.entryList[l].active = true;
              }
            }
          }
        }
        this.entryList = Object.assign([],this.entryList)
      },
      handleChooseSearchCtrl(e,_index){
        if (this.chooseResultList.length != 0) {
          for (let i = 0; i < this.chooseResultList.length; i++) {
            let item = this.chooseResultList[i];
            if (item.rowkey == this.entryList[_index].rowkey) {
              this.entryList[_index].active = !this.entryList[_index].active;
              this.chooseResultList.splice(i,1)
              this.entryList = Object.assign([],this.entryList)
              return
            }
          }
        }
        this.entryList[_index].active = true;
        this.chooseResultList.push(this.entryList[_index]);
        this.entryList = Object.assign([],this.entryList)
      },
      handleChooseSearchClick(e,_index,_obj){
        let vm = this;
        this.nodesParmas.rowkey = _obj.rowkey
        this.nodesParmas.objecturi = _obj.objectUri;
        this.showDetails = true;
        this.nodesParmas.showName = _obj.showName ? _obj.showName : _obj.displayName
        this.nodesParmas.name = _obj.name
        this.nodesParmas.image = _obj.iconUrl
        this.nodesParmas.belongGroup = _obj.belongGroup
        vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
        vm.handleDynamicCondition('socialdynamic')
        vm.handleFocusgroup('focusgroup')
        vm.handleKeyfigures('keyfigures')
        vm.handleAccountNumber('socialaccount')
        if(!e.shiftKey && !e.ctrlKey){
          this.chooseResultList = [];
          for (let i = 0; i < this.entryList.length; i++) {
            this.entryList[i].active = false;
          }
          this.entryList[_index].active = !this.entryList[_index].active;
          this.chooseResultList.push(this.entryList[_index]);
          this.firstIndex = _index,
            this.entryList = Object.assign([],this.entryList)
        }
      },

      //监听滚动事件
      handleScroll(){
        this.$nextTick(() => {
          const result = document.getElementById('result');
          const offsetHeight = result.offsetHeight;
            const scrollTop = result.scrollTop;
            const scrollHeight = result.scrollHeight;
            if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
              // 需要执行的代码
              this.searchParams.curpage = this.searchParams.curpage + 1
              this.handleInquireSearch()
            }
        });
      },

      //查询后点击效果
      handleChooseSearch1(e,_index){
        for (let i = 0; i < this.groupList.length; i++) {
          this.groupList[i].active = false;
        }
        if (this.firstIndex1) {
          this.secondIndex1 = _index
        } else {
          this.firstIndex1 = _index
          this.groupList[_index].active = true;
        }
        this.chooseResultList1 = []
        if ((this.firstIndex1 && this.secondIndex1) || (this.firstIndex1 == 0 && this.secondIndex1) || (this.firstIndex1 == 0 && this.secondIndex1 == 0)  || (this.firstIndex1 && this.secondIndex1 == 0)) {
          if (this.firstIndex1 > this.secondIndex1) {
            // chooseResultList
            for (let n = 0; n < this.groupList.length; n++) {
              if (n >= this.secondIndex1 && n <= this.firstIndex1) {
                this.chooseResultList1.push(this.groupList[n]);
                this.groupList[n].active = true;
              }
            }
          } else if (this.firstIndex1 < this.secondIndex1) {
            for (let m = 0; m < this.groupList.length; m++) {
              if (m >= this.firstIndex1 && m <= this.secondIndex1) {
                this.chooseResultList1.push(this.groupList[m]);
                this.groupList[m].active = true;
              }
            }
          } else if (this.firstIndex1 == this.secondIndex1) {
            for (let l = 0; l < this.groupList.length; l++) {
              if (l == this.firstIndex1) {
                this.chooseResultList1.push(this.groupList[l]);
                this.entryList1[l].active = true;
              }
            }
          }
        }
        this.groupList = Object.assign([],this.groupList)
      },
      handleChooseSearchCtrl1(e,_index){
        if (this.chooseResultList1.length != 0) {
          for (let i = 0; i < this.chooseResultList1.length; i++) {
            let item = this.chooseResultList1[i];
            if (item.rowkey == this.groupList[_index].rowkey) {
              this.groupList[_index].active = !this.groupList[_index].active;
              this.chooseResultList1.splice(i,1)
              this.groupList = Object.assign([],this.groupList)
              return
            }
          }
        }
        this.groupList[_index].active = true;
        this.chooseResultList1.push(this.groupList[_index]);
        this.groupList = Object.assign([],this.groupList)
      },
      handleChooseSearchClick1(e,_index,_obj){
        let vm = this;
        this.nodesParmas.rowkey = _obj.rowkey
        this.nodesParmas.objecturi = _obj.objectUri;
        this.showDetails = true;
        this.nodesParmas.showName = _obj.showName ? _obj.showName : _obj.displayName
        this.nodesParmas.name = _obj.name
        this.nodesParmas.image = _obj.iconUrl
        this.nodesParmas.belongGroup = _obj.belongGroup
        vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
        vm.handleDynamicCondition('socialdynamic')
        vm.handleFocusgroup('focusgroup')
        vm.handleKeyfigures('keyfigures')
        vm.handleAccountNumber('socialaccount')
        if(!e.shiftKey && !e.ctrlKey){
          this.chooseResultList1 = [];
          for (let i = 0; i < this.groupList.length; i++) {
            this.groupList[i].active = false;
          }
          this.groupList[_index].active = !this.groupList[_index].active;
          this.chooseResultList1.push(this.groupList[_index]);
          this.firstIndex1 = _index,
            this.groupList = Object.assign([],this.groupList)
        }
      },

      //监听滚动事件
      handleScroll1(){
        this.$nextTick(() => {
          const result = document.getElementById('groupResult');
          const offsetHeight = result.offsetHeight;
          const scrollTop = result.scrollTop;
          const scrollHeight = result.scrollHeight;
          if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
            // 需要执行的代码
            this.page = this.page + 1
            this.handleGroupList()
          }
        });
      },
      //全文检索
      handleInquireSearch() {
        listFullText(this.searchParams).then(res => {
          if (res.status == 200) {
            let entryList = res.data
            // this.entryList = [];
            this.entryList = this.entryList.concat(entryList);
            this.firstIndex = ''
            this.secondIndex = ''
            if (this.entryList.length != 0) {
              this.resultVisible = true;
            } else {
              this.resultVisible = false
            }
            for (let i = 0; i < this.entryList.length; i++) {
              this.entryList[i].active = false
            }
          }
        })
      },

      handleGroupCountFullText() {
        let obj = {
          uriList: '',
          typeList: ['socialaccount', 'socialdynamic', 'keyfigures', 'focusgroup'].join(',')
        }
        this.objectListCount = [];
        gettree(obj).then(res => {
          let treeData = res.data;
          for (let i = 0; i < treeData.length; i++) {
            if (this.searchParams.objectType == treeData[i].parentkey){
              this.objectListCount.push(treeData[i])
            }
          }
        })
      },
      //搜索
      handleSearch() {
        if (!this.keywords) {
          this.keywordVisible = false;
          return
        } else {
          this.keywordVisible = true;
        }
        let hasKeyword = '';
        hasKeyword = this.searchParams.keywords.find(item => {
          return item == this.keywords
        })
        if (!hasKeyword) {
          this.searchParams.keywords.push(this.keywords)
        }
        this.searchParams.objectList = []
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.handleInquireSearch()
        this.handleGroupCountFullText()
      },

      //删除搜索keyword
      handleDeleteSearch(_index) {
        this.searchParams.keywords.splice(_index, 1);
        if (this.searchParams.keywords.length == 0) {
          this.keywords = '*'
          this.searchParams.keywords.push(this.keywords)
        }
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.handleInquireSearch()
        this.handleGroupCountFullText()
      },

      //对象类型选择
      handleObjectType() {
        this.objectTypeCount = ''
        this.searchParams.objectList = []
        this.entryList = [];
        this.handleInquireSearch()
        this.handleGroupCountFullText()
      },
      handleObjectTypeCount() {
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.searchParams.objectList = [];
        this.searchParams.objectList = [this.objectTypeCount]
        this.handleInquireSearch()
      },
      handleObjectTypeDynamic() {
        let hasObj = '';
        hasObj = this.objectListDynamicChoose.find(item => {
          return item.uri == this.objectTypeDynamic.uri
        })
        if (!hasObj) {
          this.objectListDynamicChoose.push(this.objectTypeDynamic)
        }
        this.searchParams.objectList = []
        if (this.objectListDynamicChoose.length != 0) {
          for (let i = 0; i < this.objectListDynamicChoose.length; i++) {
            this.searchParams.objectList.push(this.objectListDynamicChoose[i].uri)
          }
        }
        this.objectTypeDynamic = {};
        this.searchParams.objectType = "socialdynamic"
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.handleInquireSearch()
      },
      hanldeDeleteObjectTypeCount(_index){
        for (let i = 0; i < this.searchParams.objectList.length; i++) {
          if (this.searchParams.objectList[i] == this.objectListCountChoose[_index].uri) {
            this.searchParams.objectList.splice(i,1);
          }
        }
        this.objectListCountChoose.splice(_index,1)
        this.searchParams.objectList = []
        if (this.objectListCountChoose.length != 0) {
          for (let i = 0; i < this.objectListCountChoose.length; i++) {
            this.searchParams.objectList.push(this.objectListCountChoose[i].uri)
          }
        }
        this.searchParams.objectType = 'socialaccount'
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.handleInquireSearch()
      },
      hanldeDeleteObjectListDynamic(_index){
        for (let i = 0; i < this.searchParams.objectList.length; i++) {
          if (this.searchParams.objectList[i] == this.objectListDynamicChoose[_index].uri) {
            this.searchParams.objectList.splice(i,1);
          }
        }
        this.objectListDynamicChoose.splice(_index,1)
        this.searchParams.objectList = []
        if (this.objectListDynamicChoose.length != 0) {
          for (let i = 0; i < this.objectListDynamicChoose.length; i++) {
            this.searchParams.objectList.push(this.objectListDynamicChoose[i].uri)
          }
        }
        this.objectTypeDynamic = {};
        this.searchParams.objectType = "socialdynamic"
        this.entryList = []
        this.searchParams.curpage = 1
        this.firstIndex = ''
        this.secondIndex = ''
        this.handleInquireSearch()
      },

      // 删除边
      deleteEdge() {
        let vm = this
        if (!this.deleteLint) {
          vm.$message.error('请先选择边')
          return
        }
        if (vm.readOnlyParmas.readOnly) {
          vm.$message.error('该边不能删除');
          vm.readOnlyParmas = {}
          vm.nodesVisible =false
          return
        }
        let linkId = this.deleteLint
        if (linkId == '') {
          vm.$message({
            message: '请选择要删除的连线！',
            type: 'error'
          })
          return
        }
        removeEdge(linkId).then(res => {
          vm.$message({
            message: '删除成功！',
            type: 'success'
          })
          vm.cy.remove(vm.cy.$(`#${vm.deleteLint}`))
          vm.nodesVisible = false
          vm.handleCreateLint()
          //执行画布保存
          vm.handlenewSnapshot()
        })
      },

      //时间轴显示
      handleTimeLint() {
        this.showTimeLint = true;
        this.timeLimeVisible = true
        this.historyVisible = false
        this.initChart()
      },

      handleHistorySanp() {
        this.showTimeLint = true;
        this.timeLimeVisible = false;
        this.historyVisible = true
      },

      //时间轴柱状图
      initChart() {
        this.chart = echarts.init(document.getElementById('container'))
        var option = null;
        option = {
          brush: {
            toolbox: ['lineX'],
            xAxisIndex: 'all',
            throttleType: 'debounce',
            throttleDelay: 200,
            outOfBrush: {
              colorAlpha: 1
            },
            inBrush: {
              colorAlpha: .3
            }
          },
          xAxis: {
            type: 'category',
            data: this.dataTime,//时间
            splitLine: {show: false},//去除网格线
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width: '2'//坐标线的宽度
              }
            },
            axisLabel: {
              interval:0,
              rotate:40,
              formatter:function(value)
              {
                return value.split(" ").join("\n");
              },
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            }
          },
          yAxis: {
            type: 'value',
            minInterval:1,
            splitLine: {show: false},//去除网格线
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width: '2'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色

              }
            }
          },
          series: [{
            data: this.dataData,//数据
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#4ad2ff'
              }
            },
            barWidth: 30
          }]
        };
        this.chart.setOption(option, true);
        this.chart.dispatchAction({
          type: 'takeGlobalCursor',
          key: 'brush',
          brushOption: {
            brushType: 'lineX'
          }
        });
        window.addEventListener('resize', () => {
          this.chart.resize();
        })
      },


      //保存画布
      handleSaveLayout() {
        let layoutData = this.cy.json()
        let saveObj = {
          id: this.layoutId,
          caseId: '1',
          graphData: JSON.stringify(layoutData)
        }
        saveOrUpdate(saveObj).then(res => {
          if (res.status != 200) {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },

      //初始化节点样式和边的样式
      handleInitializeData() {
        this.cy.nodes(function (n) {
          var node = n.data()
          n.style({
            'background-image': node['image'],
            content: node['showName'] ? node['showName'] : (node['displayname'] ? node['displayname'] : node['name']),
            'font-size': 12,
            'font-family': 'microsoft yahei'
          })
          n.unselect()
        })
        this.cy.edges(function (n) {
          var edges = n.data()
          n.style({
            'target-arrow-shape': 'triangle',
            'curve-style': 'bezier',
            'target-arrow-color': '#888',
            'source-arrow-color': '#888',
            'source-arrow-shape': edges['twoway'] == 'twoway' ? 'triangle' : 'none',
            content: edges['name'] ? edges['name'] : edges['displayname'],
            'font-size': 12,
            'font-family': 'microsoft yahei'
          })
          n.unselect()
        })

        // this.handleLayoutRun()
      },

      //解析节点之间的关系
      handleConfirmEdge(_rowkey, _otherRowkeys) {
        let vm = this;
        let rowkeyList = []
        for (let i = 0; i < _rowkey.length; i++) {
          if (_rowkey[i] != undefined) {
            rowkeyList.push(_rowkey[i]);
          }
        }
        let nodesRelationship = {
          rowkeys: rowkeyList,
          otherRowkeys: _otherRowkeys
        }
        let postData = {
          edges: []
        }
        confirmEdge(nodesRelationship).then(res => {
          if (res.status == 200) {
            let edges = res.data
            for (let e = 0; e < edges.length; e++) {
              let nodesCurrent = edges[e]
              if (nodesCurrent.length == 2) {
                let createEdges = {
                  group: 'edges',
                  data: {
                    id: nodesCurrent[0].linkId,
                    source: '',
                    target: '',
                    name: nodesCurrent[0].linkName,
                    rowkey: nodesCurrent[1].rowkey,
                    linkuri: nodesCurrent[0].linkUri,
                    endtime: nodesCurrent[0].timeEnd,
                    starttime: nodesCurrent[0].startTime,
                    twoway: nodesCurrent[0].path,
                    readOnly:nodesCurrent[0].readOnly,
                  }
                }
                if (nodesCurrent[0].path == 'from') {
                  createEdges.data.source = nodesCurrent[1].rowkey;
                  createEdges.data.target = nodesCurrent[0].rowkey;
                  postData.edges.push(createEdges)
                  vm.cy.add(postData)
                  vm.handleInitializeData()
                  vm.handleCreateLint()
                } else if (nodesCurrent[0].path == 'to' || nodesCurrent[0].path == 'twoway') {
                  createEdges.data.source = nodesCurrent[0].rowkey;
                  createEdges.data.target = nodesCurrent[1].rowkey;
                  postData.edges.push(createEdges)
                  vm.cy.add(postData)
                  vm.handleInitializeData()
                  vm.handleCreateLint()
                }
              }
            }
          }
        })
      },

      //获取cookies中的关系图节点
      handleGetCookiesNodes() {
        let vm = this;
        let otherRowkey = [];
        let hasCookieRelation = util.getObjectsInRelationGraph()
        if (hasCookieRelation) {
          let cookiesData = {
            nodes: []
          }
          for (let t = 0; t < hasCookieRelation.length; t++) {
            let current = hasCookieRelation[t]
            this.cookiesList.push(current.rowkey);
            otherRowkey.push(current.rowkey);
            cookiesData.nodes.push({
              id: '',
              group: 'nodes',
              data: {
                id: current.rowkey,
                displayname: current.displayName,
                showName: current.showName,
                name: current.name,
                image: current.image,
                objecttype: current.objecttype,
                objecturi: current.objecturi,
                rowkey: current.rowkey,
                belongGroup:current.belongGroup
              },
              position: {x: (Math.round(Math.random()) * 1000), y: (Math.round(Math.random()) * 800)}
            })
          }
          vm.cy.add(cookiesData.nodes)
          vm.handleInitializeData()
          //
          let cyData = vm.cy.json();
          let cyNodeRowkey4 = []
          if (cyData.elements.nodes) {
            for (let g = 0; g < cyData.elements.nodes.length; g++){
              if (cyData.elements.nodes[g].data.rowkey) {
                cyNodeRowkey4.push(cyData.elements.nodes[g].data.rowkey)
              }
            }
            vm.handleConfirmEdge(cyNodeRowkey4,otherRowkey)
          }

        }
        Cookies.set('RelationGraphData', '')
      },

      // 获取分组id的信息
      handleGroupIdList() {
        let vm = this;
        vm.groupIdList = [];
        if (sessionStorage.getItem('groupId')) {
          groupIdList(sessionStorage.getItem('groupId')).then(res => {
            if (res.status == 200) {
              let GroupIdList = res.data;
              let GroupIdData = {
                nodes: []
              }
              for (let t = 0; t < GroupIdList.length; t++) {
                let current = GroupIdList[t]
                this.groupIdList.push(current.rowkey);
                GroupIdData.nodes.push({
                  id: '',
                  group: 'nodes',
                  data: {
                    id: current.rowkey,
                    displayname: current.displayName,
                    showName: current.showName,
                    name: current.name,
                    image: current.iconUrl,
                    objecttype: current.objectType,
                    objecturi: current.objectUri,
                    rowkey: current.rowkey,
                    twoway: current.twoway,
                    belongGroup:current.belongGroup
                  },
                  position: {x: (Math.round(Math.random()) * 1000), y: (Math.round(Math.random()) * 800)}
                })
              }
              vm.cy.add(GroupIdData.nodes)
              vm.handleInitializeData()
              // vm.handleCreateHasRelations()
              vm.handleLayoutRun('breadthfirst')
            }
          })
        }
      },

      //添加有关系的边
      handleCreateHasRelations() {
        let vm = this;
        let cyNodes = vm.cy.json();
        let cyNodeList = [];
        let otherRowkeyList = [];
        otherRowkeyList = this.groupIdList.concat(this.cookiesList)
        if (cyNodes.elements.nodes) {
          for (let i = 0; i < cyNodes.elements.nodes.length; i++) {
            let currentNodes = cyNodes.elements.nodes[i]
            if (currentNodes.data.rowkey) {
              cyNodeList.push(currentNodes.data.rowkey)
            }
          }
          vm.handleConfirmEdge(cyNodeList, otherRowkeyList)
        }
      },

      //获取初始化数据
      handleGetGraph() {
        let vm = this;
        vm.handleInitializeData()
        if (this.getSnapshotList.length != 0) {
          vm.handleGetSnapDataById(this.getSnapshotList[0].id,0, this.getSnapshotList[0].description)
          vm.historyName = this.getSnapshotList[0].description
          this.canvasId = this.getSnapshotList[0].id
        } else {
          // vm.handleGroupIdList();
        }
        vm.handleLayoutRun('breadthfirst')

      },

      //右击画布菜单
      showMenu(event) {
        var event = event || window.event
        event.preventDefault()
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = event.pageX || event.clientX + scrollX;
        var y = (event.pageY - 50) || (event.clientY + scrollY - 50);
        this.cyCanves.top = y + 5;
        this.cyCanves.left = x + 5;
        this.findOperateListModel = [];
        this.findOperateListModelAll = [];
        this.findOperateList = [];
        this.example = ''
        this.form.exampleName = '';
        if (this.nodesVisible) {
          this.cyVisible = false;
        } else {
          this.cyVisible = true;
        }
      },

      //显示搜索菜单
      handleShowSearch() {
        this.visible = !this.visible;
        this.showRelations = false;
        this.showCase = false;
        this.showOpacity = true;
        this.showCaseOpacity = false;
        this.showRelationOpacity = false
        this.showCase = false;
        this.showRelations = false;
        this.showRelationOpacity = false
        this.groupVisible = false;
        this.resultVisible = this.visible;
        if (this.entryList.length == 0) {
          this.resultVisible = false
        }
        setTimeout(() => {
          this.chart.resize();
        }, 150)
      },

      //显示案例
      handleShowCase() {
        this.showCase = !this.showCase;
        this.groupVisible = !this.groupVisible;
        this.visible = false;
        this.showRelations = false;
        this.showOpacity = false;
        this.showCaseOpacity = true;
        this.showRelationOpacity = false
        this.resultVisible = false
        setTimeout(() => {
          this.chart.resize();
        }, 150)
      },

      //显示分析分组
      handleShowRelations() {
        this.visible = false;
        this.showCase = false;
        this.showRelations = !this.showRelations
        this.showOpacity = false;
        this.showCaseOpacity = false;
        this.showRelationOpacity = true
        setTimeout(() => {
          this.chart.resize();
        }, 150)
      },

      //获取分组
      async loadTree(type, treeId) {
        let result = await getsubscribeTree({top: 'false'})
        this.loadTreeList = result.data;
        if (sessionStorage.getItem("groupId")) {
          for (let i = 0; i < this.loadTreeList.length; i++) {
            let item = this.loadTreeList[i];
            if (item.id == sessionStorage.getItem("groupId")) {
              this.handleChooseGroupId(i,this.loadTreeList[i].id,this.loadTreeList[i].displayname)
              this.activeNum = i
            }
          }
        } else {
          this.handleChooseGroupId(0,this.loadTreeList[0].id,this.loadTreeList[0].displayname)
        }
      },

      //左侧菜单样式
      handleChooseGroupId(_index, _id, _name) {
        let vm = this;
        this.activeNum = _index;
        vm.cy.collection('node').remove();
        sessionStorage.setItem("groupId", _id)
        sessionStorage.setItem('groupDisplayName', _name);
        this.groupDisplayName = sessionStorage.getItem('groupDisplayName')
        this.handleGetSnapshot()
        this.page = 1
        this.handleGroupList()
      },

      //布局变幻
      handleLayoutRun(_name) {
        let _this = this
        let options = {
          name: _name ? _name : 'breadthfirst',
          fit: true, // whether to fit the viewport to the graph
          animate: true, // 出来动画
          zoom: 0.2
        };
        let layout = _this.cy.layout(options)
        layout.run()
      },

      //画布布局
      handeleChooseLayout(_layout) {
        let vm = this;
        vm.cyVisible = false;
        if (_layout == 'initialize') {
          vm.cy.reset();
          vm.cy.zoom( 0.5 )
        } else if (_layout == 'breadthfirst') {
          vm.handleLayoutRun('breadthfirst')
        } else if (_layout == 'grid') {
          vm.handleLayoutRun('grid')
        } else if (_layout == 'circle') {
          vm.handleLayoutRun('circle')
        } else if (_layout == 'random') {
          vm.handleLayoutRun('random')
        }
      },

      //画布缩放
      handleChangeSize(_size) {
        let vm = this;
        this.cyVisible = false;
        this.cy.zoom({
          level: parseInt(_size), // the zoom level
          renderedPosition: {x: vm.cyCanves.left, y: vm.cyCanves.top}
        })
      },

      //新增实体
      handleCreatEntity() {
        this.addNodesVisible = true;
        this.nodesVisible = false;
        this.cyVisible = false;
        this.handleGetTree()
      },

      // 获取添加树状图
      handleGetTree() {
        let obj = {
          uriList: '',
          typeList: ['socialaccount', 'socialdynamic', 'keyfigures', 'focusgroup'].join(',')
        }
        gettree(obj).then(res => {
          this.addNode = this.handleLevelOne(res.data)
        })
      },

      //控制树下拉框的显示与隐藏
      hideTree() {
        if (this.showTree) {
          this.showTree = false
        }
      },

      showTreeFn() {
        this.showTree = !this.showTree
      },

      handleGetTreeDate(data) {
        if (data.parenturi) {
          this.example = data.value
          this.form.exampleName = data.displayname
          this.showTree = false
          this.getproperty(this.example)
        }
      },

      // 根据对象Uri获得该该对象下所有可操作的属性
      getproperty(_uri) {
        this.showSelect = true;
        findOperateProperties({uri: _uri}).then(res => {
          let arrList = []
          this.findOperateList = res.data
          this.findOperateListModel = []
          this.findOperateListModelAll = [];
          for (let i = 0; i < this.findOperateList.length; i++) {
            let current = this.findOperateList[i]
            if (current.representative == '1') {
              if (current.propertyType == 'GisData') {
                let obj = {
                  'propertyUri': current.propertyUri,
                  'propertyType': 'GisData',
                  'displayed': current.displayed == '0' ? false : true,
                  'address': '',
                  'latitude': '',
                  'longitude': '',
                  'displayname': current.displayname,
                  'representative': current.representative,
                  'label': current.representative == 1
                }
                this.findOperateListModel.push(obj)
              } else if (current.propertyType == 'TimeInterval') {
                let timeObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'TimeInterval',
                  'displayed': current.displayed == '0' ? false : true,
                  "timeStart": '',
                  "timeEnd": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'representative': current.representative
                }
                this.findOperateListModel.push(timeObj)
              } else if (current.propertyType == 'DateTime') {
                let timeDataObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'DateTime',
                  'displayed': current.displayed == '0' ? false : true,
                  "value": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'representative': current.representative
                }
                this.findOperateListModel.push(timeDataObj)
              } else {
                let stringObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'String',
                  "value": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'displayed': current.displayed == '0' ? false : true,
                  'representative': current.representative
                }
                this.findOperateListModel.push(stringObj)
              }
            } else {
              if (current.propertyType == 'GisData') {
                let obj = {
                  'propertyUri': current.propertyUri,
                  'propertyType': 'GisData',
                  'displayed': current.displayed == '0' ? false : true,
                  'address': '',
                  'latitude': '',
                  'longitude': '',
                  'displayname': current.displayname,
                  'representative': current.representative,
                  'label': current.representative == 1
                }
                this.findOperateListModelAll.push(obj)
              } else if (current.propertyType == 'TimeInterval') {
                let timeObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'TimeInterval',
                  'displayed': current.displayed == '0' ? false : true,
                  "timeStart": '',
                  "timeEnd": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'representative': current.representative
                }
                this.findOperateListModelAll.push(timeObj)
              } else if (current.propertyType == 'DateTime') {
                let timeDataObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'DateTime',
                  'displayed': current.displayed == '0' ? false : true,
                  "value": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'representative': current.representative
                }
                this.findOperateListModelAll.push(timeDataObj)
              } else {
                let stringObj = {
                  "propertyUri": current.propertyUri,
                  "propertyType": 'String',
                  "value": '',
                  "label": current.representative == 1,
                  'displayname': current.displayname,
                  'displayed': current.displayed == '0' ? false : true,
                  'representative': current.representative
                }
                this.findOperateListModelAll.push(stringObj)
              }
            }

          }
        })
      },

      //查询选择属性类型
      handleChoosePropertyUri(_uri) {
        this.addAttributeSave = {};
        for (let i = 0; i < this.findOperateListModelAll.length; i++) {
          let current = this.findOperateListModelAll[i];
          if (current.representative === '1') {
            this.$message.error('该属性为代表属性，不允许操作!')
            return false
          }
          if (current.propertyUri == _uri) {
            this.addAttribute.propertyType = current.propertyType;
            this.addAttribute.name = current.displayname
          }
        }

        for (let j = 0; j < this.propertyList.length; j++) {
          let propertyListCurrent = this.propertyList[j]
          if (_uri != propertyListCurrent.propertyUri) {
            this.propertyType = '';
          }
            for (let k = 0; k < propertyListCurrent.propertyValues.length; k++) {
              if (_uri == propertyListCurrent.propertyUri && !propertyListCurrent.propertyValues[k].readOnly) {
                this.propertyType = 'edit';
              }
            }
        }
      },

      //取消属性
      handleCannel() {
        let vm = this;
        vm.showSelect = false;
        vm.addAttributeSave = {};
        vm.addAttribute.propertyType = '';
        vm.addAttribute = {};
      },

      //属性新增或编辑
      handleCreateAttr() {
        // propertySave propertyUpdate
        let vm = this;
        let propertyeObj = {
          "objectUri": this.nodesParmas.objecturi,
          "rowkey": this.nodesParmas.rowkey,
          "propertyList": []
        }
        this.addAttributeSave.propertyUri = this.addAttribute.propertyUri
        this.addAttributeSave.propertyType = this.addAttribute.propertyType
        if (this.addAttribute.propertyType == 'TimeInterval') {
          if (!this.addAttributeSave.timeStart) {
            this.$message.error('请选择开始时间');
            return false
          }
          if (!this.addAttributeSave.timeEnd) {
            this.$message.error('请选择结束时间');
            return false
          }
          this.addAttributeSave.timeStart = new Date(this.addAttributeSave.timeStart).getTime()
          this.addAttributeSave.timeEnd = new Date(this.addAttributeSave.timeEnd).getTime()
        } else if (this.addAttribute.propertyType == 'DateTime') {
          if (!this.addAttributeSave.value) {
            this.$message.error('请选择日期');
            return false
          }
          this.addAttributeSave.value = new Date(this.addAttributeSave.value).getTime()
        } else if (this.addAttribute.propertyType == 'GisData') {
          if (!this.addAttributeSave.latitude) {
            this.$message.error('请输入经度');
            return false
          }
          if (!this.addAttributeSave.longitude) {
            this.$message.error('请输入纬度');
            return false
          }
          if (!this.addAttributeSave.address) {
            this.$message.error('请输入描述');
            return false
          }
        } else {
          if (!this.addAttributeSave.value) {
            this.$message.error('请输入内容');
            return false
          }
        }
        propertyeObj.propertyList.push(this.addAttributeSave)
        if (this.propertyType == 'edit') {
          propertyUpdate(propertyeObj).then(res => {
            if (res.status == 200) {
              vm.getNodeDetails(vm.rowkey, vm.objecturi)
              setTimeout(() => {
                // vm.handleGetGraph()
                // vm.handlenewSnapshot()
              }, 100)
              vm.showSelect = false;
              vm.addAttributeSave = {};
              vm.addAttribute.propertyType = '';
              vm.addAttribute = {};
            }
          })
        } else {
          propertySave(propertyeObj).then(res => {
            if (res.status == 200) {
              vm.getNodeDetails(vm.rowkey, vm.objecturi)
              setTimeout(() => {
                // vm.handleGetGraph()
                // vm.handlenewSnapshot()
              }, 100)
              vm.showSelect = false;
              vm.addAttributeSave = {};
              vm.addAttribute.propertyType = '';
              vm.addAttribute = {};
            }
          })
        }
      },

      // 查找出一级目录
      handleLevelOne(data, parent) {
        var tree = []
        var temp
        for (var i = 0; i < data.length; i++) {
          if (data[i].parentkey == parent) {
            var obj = data[i]
            obj.label = data[i].displayname
            obj.value = data[i].uri
            obj.parenturi = data[i].parenturi
            obj.parent = parent
            temp = this.handleLevelOne(data, data[i].ownkey)
            if (temp.length > 0) {
              obj.children = temp
            }
            tree.push(obj)
          }
        }
        return tree
      },

      //创建实体检验
      handleEntityVerify() {
        for (let i = 0; i < this.findOperateListModel.length; i++) {
          let current = this.findOperateListModel[i];
          if (current.propertyType == 'GisData') {
            if (!current.longitude) {
              this.$message.error('请输入经度')
              this.createLoading = false;
              return false
            }
            if (!current.latitude) {
              this.$message.error('请输入纬度')
              this.createLoading = false;
              return false
            }
            if (!current.address) {
              this.$message.error('请输入地理位置描述')
              this.createLoading = false;
              return false
            }
            // TimeInterval timeStart timeEnd
          } else if (current.propertyType == 'TimeInterval') {
            if (!current.timeStart) {
              this.$message.error('请选择开始时间')
              this.createLoading = false;
              return false
            }
            if (!current.timeEnd) {
              this.$message.error('请选择结束时间')
              this.createLoading = false;
              return false
            }
          } else {
            if (!current.value) {
              this.$message.error(`请输入${current.displayname}`)
              this.createLoading = false;
              return false
            }
          }
        }
        return true
      },

      //创建实体
      handleSaveEntity() {
        let vm = this;
        this.createLoading = true;
        for (let i = 0; i < this.findOperateListModel.length; i++) {
          let current = this.findOperateListModel[i]
          if (current.propertyType == 'TimeInterval') {
            current.timeStart = new Date(current.timeStart).getTime()
            current.timeEnd = new Date(current.timeEnd).getTime()
          } else if (current.propertyType == 'DateTime') {
            current.value = new Date(current.value).getTime()
          }
        }
        let saveOperate = JSON.parse(JSON.stringify(this.findOperateListModel))
        for (let j = 0; j < saveOperate.length; j++) {
          let _index = saveOperate[j]
          delete _index.displayname
          delete _index.representative
        }
        let queryObj = {
          objectUri: this.example,
          propertyList: saveOperate,
        }
        let verify = this.handleEntityVerify();
        if (!verify) {
          this.createLoading = false;
          return
        }
        saveExample(queryObj).then(res => {
          this.createLoading = false;
          if (res.status == 200) {
            let entityData = res.data;
            let entityObj = {
              id: '',
              data: {
                id: entityData.rowkey,
                displayname: entityData.displayName,
                name: entityData.name,
                showName: entityData.showName,
                image: entityData.iconUrl,
                objecttype: entityData.objectType,
                objecturi: entityData.objectUri,
                rowkey: entityData.rowkey,
                twoway: entityData.twoway,
                belongGroup: entityData.belongGroup
              }
            }
            this.cy.add(entityObj)
            this.handleInitializeData()
            this.addNodesVisible = false;
            this.handlenewSnapshot()

          }
        }).catch(error => {
          this.createLoading = false;
        })
      },

      //创建边
      handleCreateEdge(_uri) {
        let vm = this;
        this.nodesVisible = false;
        this.showEdges = true;
        if (_uri == '落地') {
          this.createRelationTemp.linkUri = 'com.scistor.link.iswho';

          this.disabledIswho = true;
        } else {
          this.createRelationTemp.linkUri = '';
          this.disabledIswho = false;
        }
        // vm.eh.start(vm.cy.$(`#${vm.nodeId}`));
        // vm.eh.options.preview =  true
      },

      //获取快照
      handleGetSnapshot() {
        let vm = this;
        vm.getSnapshotList = []
        let snapshotObj = {
          caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1,
          id: ''
        }
        getSnapshot(snapshotObj).then(res => {
          if (res.status == 200) {
            vm.getSnapshotList = res.data
            // if (this.getSnapshotList.length == 0) {
            //   getGraph({caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1}).then(res => {
            //     if (res.data.graphData) {
            //       this.layoutId = res.data.id
            //       let result = JSON.parse(res.data.graphData);
            //       let obj = {
            //         nodes: [],
            //         edges: [],
            //       }
            //       obj.nodes = result.elements.nodes
            //       vm.cy.add(obj.nodes)
            //       vm.handleInitializeData()
            //       if (result.elements.edges) {
            //         obj.edges = result.elements.edges
            //         vm.cy.add(obj.edges)
            //         vm.handleInitializeData()
            //       }
            //     }
            //   })
            // }
            if (vm.getSnapshotList.length == 0) {
              this.historyName = ''
              this.handleGetCookiesNodes()
            }
            for (let i = 0; i < vm.getSnapshotList.length; i++) {
              vm.getSnapshotList[i].editDes = false
            }
            vm.snapshotActive = 0;
            this.handleGetGraph()
            // }
          } else {
            this.$message.error(res.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        })
      },

      //获取画布上所有边
      handleGetAllEdges() {
        let vm = this;
        vm.dataTime = [];
        vm.dataData = [];
        let allData = vm.cy.json();
        if (allData.elements.edges) {
          let hasEchart = {}
          if (allData.elements.edges && allData.elements.edges.length != 0) {
            vm.resultEdges = allData.elements.edges
            for (let i = 0; i < allData.elements.edges.length; i++) {
              let current = allData.elements.edges[i]
              if (current.data.starttime) {
                let current = allData.elements.edges[i];
                let timeFormat = formatDateTime(current.data.starttime)
                if (!hasEchart[formatDateTime(current.data.starttime)]) {
                  hasEchart[formatDateTime(current.data.starttime)] = 1
                } else {
                  hasEchart[formatDateTime(current.data.starttime)] = hasEchart[formatDateTime(current.data.starttime)] + 1
                }
              }


            }
          }
          if (hasEchart) {
            for (let key in hasEchart) {
              vm.dataTime.unshift(key);
              // vm.dataData.unshift(hasEchart[key])
            }
          }
          let arr = [];
          if (vm.dataTime.length != 0) {
            for (let l = 0; l < vm.dataTime.length; l++) {
              let indexCurrent = vm.dataTime[l];
              let endDataTime = new Date(indexCurrent.replace(/-/g, '/')).getTime();
              arr.push(endDataTime)
            }
          }
          if (arr.length != 0) {
            vm.dataTime = [];
            arr.sort(function (a, b) {
              return b - a
            })
            for (let a = 0; a < arr.length; a++) {
              vm.dataTime.unshift(formatDateTime(arr[a]))
              if (hasEchart) {
                vm.dataData.unshift(hasEchart[formatDateTime(arr[a])])
              }
            }
          }
          vm.initChart()
        }
      },

      handelSaveDataTip(_id, _index, _name){
        this.handleGetSnapDataById(_id, _index, _name)
        // this.$confirm('请先保存快照，防止数据丢失', '确认信息', {
        //   distinguishCancelAndClose: true,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '放弃保存'
        // })
        //   .then(() => {
        //   })
        //   .catch(action => {
        //     if (action === 'cancel') {
        //
        //     }
        //   });
      },

      //创建时间轴
      handleCreateLint(){
        let vm = this;
        vm.dataTime = [];
        vm.dataData = [];
        let allCyData = this.cy.json();
        if (allCyData.elements.edges != undefined) {
          if (allCyData.elements.edges.length != 0) {
            let edgesList = allCyData.elements.edges;
            //获取所有时间并排序
            let sortTime = [];
            let sortTimes = []
            for (let i = 0; i < allCyData.elements.edges.length; i++) {
              if (allCyData.elements.edges[i].data.starttime) {
                sortTimes.push(allCyData.elements.edges[i].data.starttime)

              }
            }
            sortTimes.sort(function (a, b) {
              return a - b
            })
            for (let u = 0; u < sortTimes.length; u++) {
              sortTime.push(formatDateTime(sortTimes[u]))
            }
            let s=new Set(sortTime);
            let arr = [...s];

            this.dataTime = arr
            let hasEchart = {}
            for (let j = 0; j < this.dataTime.length; j++) {
              hasEchart[this.dataTime[j]] = 0;
            }

            for (let m = 0; m < allCyData.elements.edges.length; m++) {
              if (allCyData.elements.edges[m].data.starttime) {
                let formatDTIndex = allCyData.elements.edges[m].data.starttime;
                hasEchart[formatDateTime(formatDTIndex)] = hasEchart[formatDateTime(formatDTIndex)] + 1
              }
            }

            for (let key in hasEchart ) {
              vm.dataData.push(hasEchart[key])
            }
            vm.initChart()
            setTimeout(() => {
              this.chart.resize();
            }, 150)
            this.chart.on('brushSelected', function (params) {
              console.log(params.batch[0].areas)
              if (params.batch[0].areas.length != 0) {
                let start = new Date(vm.dataTime[params.batch[0].areas[0].coordRange[0]].replace(/-/g, '/')).getTime();
                let end = new Date(vm.dataTime[params.batch[0].areas[0].coordRange[1]].replace(/-/g, '/')).getTime();
                if (allCyData.elements.edges.length != 0) {
                  vm.cy.collection("edge").removeClass("edgeActive");
                  for (let j = 0; j < allCyData.elements.edges.length; j++) {
                    let curretnIndex = allCyData.elements.edges[j]
                    let timeFormat = formatDateTime(curretnIndex.data.starttime)
                    let timeDate = new Date(timeFormat.replace(/-/g, '/')).getTime();
                    if (timeDate >= start && timeDate <= end) {
                      vm.cy.$(`#${curretnIndex.data.id}`).addClass('edgeActive')
                    }
                  }
                }

              }
              // if (params.batch[0]) {
              //   console.log(params.batch[0].areas[0].coordRanges)
              // }
            })
          }
        } else {
          vm.initChart()
        }

      },

      //根据快照ID获取快照数据
      handleGetSnapDataById(_id, _index, _name) {
        let vm = this;
        sessionStorage.setItem('historyName', _name)
        if (vm.getSnapshotList.length!= 0) {
          this.historyName = sessionStorage.getItem('historyName')
        } else{
          this.historyName = ''
        }
        this.canvasId = _id
        this.snapshotActive = _index
        let snapDateById = {
          caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1,
          id: _id
        }
        getSnapDataById(snapDateById).then(res => {
          if (res.status == 200) {
            vm.cy.collection('node').remove();
            let result = {};
            result = JSON.parse(res.data[0].graphData);
            vm.resultEdges = [];

            let obj = {
              nodes: [],
              edges: [],
            }
            obj.nodes = result.elements.nodes
            vm.cy.add(obj.nodes)
            vm.handleInitializeData()

            if (result.elements.edges) {
              obj.edges = result.elements.edges
              vm.cy.add(obj.edges)
            }
            vm.handleCreateLint()
            vm.handleInitializeData()
            vm.handleGetCookiesNodes()
            // vm.handleGroupIdList();
            vm.handleLayoutRun()
            vm.handleCreateLint()
            // vm.handleLayoutRun('breadthfirst')
          }
        })
      },

      // 根据快照ID删除快照
      delSnapData: function (snapid, index) {
        let vm = this
        this.$confirm('删除该快照, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletedSnap(snapid).then(res => {
            if (res.status == 200) {
              vm.$message({
                message: '成功删除快照',
                type: 'success'
              })
              vm.getSnapshotList.splice(index, 1)
              vm.handleGetSnapDataById(this.getSnapshotList[0].id,0, this.getSnapshotList[0].description)
            } else {
              this.$message.error(res.msg)
            }
          }).catch(error => {
            this.$message.error(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        })
      },
      // 下载快照
      download(url){
        window.location.href= url
      },
      editVisibleSnapData(snapid, _index,_description){
        this.handleGetSnapDataById(snapid, _index,_description)
        this.getSnapshotList[_index].editDes = true
        this.getSnapshotList = Object.assign([],this.getSnapshotList)
        this.describeVisible1 = true;
        this.editId = snapid
        this.editDescription = _description
        this.describe1 = _description
      },

      //编辑快照
      editSnapData(snapid, _description,_index){
        let _this = this
        var graph = _this.cy.json(),
          snap = _this.cy.png({full: true})
        graph.panningEnabled = true
        graph.userPanningEnabled = true
        snapshot(JSON.stringify({
          // snapshot: this.editId,
          caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1,
          // graphData: JSON.stringify(graph),
          id: this.canvasId,
          description:this.describe1
        })).then(data => {
          this.describeVisible1 = false
          this.handleGetSnapshot()
        }).catch(error => {
          this.$message.error(error)
        })
        // console.log('graph', graph)
      },

      // 生成快照
      handlenewSnapshot2: function () {
        let _this = this
        var graph = _this.cy.json(),
          snap = _this.cy.png({full: true})
        graph.panningEnabled = true
        graph.userPanningEnabled = true
        snapshot(JSON.stringify({
          snapshot: snap,
          caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1,
          graphData: JSON.stringify(graph),
          id: this.canvasId,
          description:this.historyName
        })).then(data => {
          // this.$message.success('图片生成成功！')
          this.handleGetSnapshot()
          this.cyVisible = false;
        }).catch(error => {
          this.$message.error(error)
        })
        // console.log('graph', graph)
      },

      handleAddDes(){
        let _this = this
        _this.describeVisible = true;
        this.cyVisible = false;
        this.describe = '';
      },
      handlenewSnapshot1: function () {
        let _this = this
        var graph = _this.cy.json(),
          snap = _this.cy.png({full: true})
        graph.panningEnabled = true
        graph.userPanningEnabled = true
        snapshot(JSON.stringify({
          snapshot: snap,
          caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1,
          graphData: JSON.stringify(graph),
          description:this.describe
        })).then(data => {
          _this.describeVisible = false;
          // this.$message.success('图片生成成功！')
          this.handleGetSnapshot()
          this.cyVisible = false;
        }).catch(error => {
          _this.describeVisible = false;
          this.$message.error(error)
        })
        // console.log('graph', graph)
      },

      //组织
      handleFocusgroup(_type) {
        let vm = this;
        this.focusgroup = [];//组织
        vm.nodesVisible = false;
        let data = {
          rowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objectUri: this.nodesParmas.objecturi,
          filterObjectUris:null,
        }
        filterListRelation(data).then(res => {
          if (res.status == 200) {
            let focusgroup = res.data;
            let hash = {};
            const newArr = focusgroup.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            this.focusgroup = newArr
          }
        })
      },

      //人物
      handleKeyfigures(_type) {
        let vm = this;
        this.keyfigures = [];//人物
        vm.nodesVisible = false;
        let data = {
          rowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objectUri: this.nodesParmas.objecturi,
          filterObjectUris:null,
        }
        filterListRelation(data).then(res => {
          if (res.status == 200) {
            let keyfigures = res.data;
            let hash = {};
            const newArr = keyfigures.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            this.keyfigures = newArr
          }
        })
      },


      //账号
      handleAccountNumber(_type) {
        let vm = this;
        this.socialaccount = [];//账号
        vm.nodesVisible = false;
        let data = {
          rowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objectUri: this.nodesParmas.objecturi,
          filterObjectUris:null,
        }
        filterListRelation(data).then(res => {
          if (res.status == 200) {
            let socialaccount = res.data;
            let hash = {};
            const newArr = socialaccount.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            this.socialaccount = newArr
          }
        })
      },

      //动态
      handleDynamicCondition(_type) {
        let vm = this;
        this.dynamicCondition = [];//动态
        vm.nodesVisible = false;
        let data = {
          rowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objectUri: this.nodesParmas.objecturi,
          filterObjectUris:null,
        }
        filterListRelation(data).then(res => {
          if (res.status == 200) {

            let dynamicCondition = res.data;
            let hash = {};
            const newArr = dynamicCondition.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            this.dynamicCondition = newArr
          }
        })
      },

      handlenewSnapshot(){},

      //删除关联动态
      handleDeleteDynamicCondition() {
        let vm = this;
        if (this.dynamicCondition.length != 0) {
          let allData = vm.cy.json();
          if (allData.elements.nodes) {
            for (let i = 0; i < allData.elements.nodes.length; i++) {
              let current = allData.elements.nodes[i].data.rowkey
              if (this.dynamicCondition.find(item => {
                return current == item.rowkey
              })) {
                vm.cy.remove(vm.cy.$(`#${current}`))
                vm.nodesVisible = false
                //执行画布保存
                vm.handlenewSnapshot()
              }
            }
          }
        }
      },

      //删除关联账号
      handleDeltetAccountNumber() {
        let vm = this;
        if (this.socialaccount.length != 0) {
          let allData = vm.cy.json();
          if (allData.elements.nodes) {
            for (let i = 0; i < allData.elements.nodes.length; i++) {
              let current = allData.elements.nodes[i].data.rowkey
              if (this.socialaccount.find(item => {
                return current == item.rowkey
              })) {
                vm.cy.remove(vm.cy.$(`#${current}`))
                vm.nodesVisible = false
                //执行画布保存
                vm.handlenewSnapshot()
              }
            }
          }
        }
      },

      //删除人物
      handleDeleteFigure(){
        let vm = this;
        if (this.keyfigures.length != 0) {
          let allData = vm.cy.json();
          if (allData.elements.nodes) {
            for (let i = 0; i < allData.elements.nodes.length; i++) {
              let current = allData.elements.nodes[i].data.rowkey
              if (this.keyfigures.find(item => {
                return current == item.rowkey
              })) {
                vm.cy.remove(vm.cy.$(`#${current}`))
                vm.nodesVisible = false
                //执行画布保存
                vm.handlenewSnapshot()
              }
            }
          }
        }
      },


      //删除组织
      handleDeltetOrganization(){
        let vm = this;
        if (this.focusgroup.length != 0) {
          let allData = vm.cy.json();
          if (allData.elements.nodes) {
            for (let i = 0; i < allData.elements.nodes.length; i++) {
              let current = allData.elements.nodes[i].data.rowkey
              if (this.focusgroup.find(item => {
                return current == item.rowkey
              })) {
                vm.cy.remove(vm.cy.$(`#${current}`))
                vm.nodesVisible = false
                //执行画布保存
                vm.handlenewSnapshot()
              }
            }
          }
        }
      },
      // 删除关联文档
      handleDeletedocument(){},
      // 删除关联多媒体
      handleDeletemedia(){}

      //获取详情
      getNodeDetails(_rowkey, _objectUri) {
        let vm = this;
        let getdetailObj = {
          rowkey: _rowkey,
          objectUri: _objectUri
        }
        getdetail(getdetailObj).then(res => {
          if (res.status == 200) {
            let detailesData = res.data;
            if (detailesData.objectUri.indexOf('entry')) {
              this.addGroup = true;
            }
            let allData = {}
            allData = vm.cy.json()
            if (allData.elements.nodes) {
              for (let i = 0; i < allData.elements.nodes.length; i++) {
                let current = allData.elements.nodes[i];
                if (current.data.id == _rowkey && detailesData.showName) {
                  current.data.showName = detailesData.showName;
                }
              }
              vm.cy.collection("node").remove();
              vm.cy.add(allData.elements.nodes);
              // vm.handleLayoutRun()
              if (allData.elements.edges) {
                vm.cy.add(allData.elements.edges);
              }
              vm.handleInitializeData()
            }

            // vm.handleLayoutRun()
            this.propertyList = detailesData.propertyList
          }
        })
      },

      //删除节点
      handleDeleteNode() {
        let vm = this;
        vm.nodesVisible = false;
        vm.showDetails = false;
        if (vm.deleteId) {
          vm.cy.remove(vm.cy.$(`#${vm.deleteId}`))
          //执行画布保存
          vm.handlenewSnapshot()
          vm.handleCreateLint()
        } else {
          vm.$message.error('请选择实体')
        }
      },

      //添加至该分组
      handleAddGroup() {
        let vm = this
        let addinstanceObj = {
          "gid": sessionStorage.getItem("groupId"),
          "objs": [
            {
              "objectUri": vm.objecturi,
              "rowkey": vm.rowkey
            }
          ]
        }
        addInstance(addinstanceObj).then(res => {
          if (res.status == 200) {
            this.$message({
              message: '添加至该分组成功',
              type: 'success'
            });
            this.nodesVisible = false
          } else {
            this.$message({
              message: '添加至该分组失败',
              type: 'error'
            });
          }
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },

      //
      handleFilterListRelation(_type){
        let vm = this;
        vm.nodesVisible = false;
        let data = {
          rowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objectUri: this.nodesParmas.objecturi,
          filterObjectUris:null,
        }
        let otherRowkey = [];
        filterListRelation(data).then(res => {
          if (res.status == 200) {
            let relationsData = res.data;
            let hash = {};
            const uniqueList = relationsData.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            let relationsAdd = {
              nodes: [],
              edges: [],
            }
            for (let i = 0; i < uniqueList.length; i++) {
              let current = uniqueList[i];
              otherRowkey.push(current.rowkey)
              let relationsObj = {
                id: '',
                group: 'nodes',
                data: {
                  id: current.rowkey,
                  displayname: current.displayName,
                  name: current.name,
                  showName: current.showName,
                  image: current.iconUrl,
                  objecttype: current.objectType,
                  objecturi: current.objectUri,
                  rowkey: current.rowkey,
                  twoway: current.twoway,
                  belongGroup:current.belongGroup
                }
              }


              let relationsEdgeObj = {
                group: 'edges',
                data: {
                  id: current.linkId,
                  source: vm.nodesParmas.rowkey,
                  target: current.rowkey,
                  name: current.linkName ? current.linkName : (current.name ? current.name : current.displayName),
                  rowkey: current.rowkey,
                  linkuri: current.linkUri,
                  endtime: current.timeEnd,
                  starttime: current.startTime,
                  twoway: current.path,
                  readOnly:current.readOnly,
                }
              }
              debugger
              relationsAdd.nodes.push(relationsObj)
              relationsAdd.edges.push(relationsEdgeObj)
            }
            vm.cy.add(relationsAdd.nodes)
            vm.handleInitializeData()
            vm.cy.add(relationsAdd.edges)
            vm.handleInitializeData()
            vm.handleLayoutRun('breadthfirst')

            vm.handlenewSnapshot()
            let cyNodes = vm.cy.json();
            let cyNodeList = [];
            if (cyNodes.elements.nodes) {
              for (let n = 0; n < cyNodes.elements.nodes.length; n++) {
                let currentNodes = cyNodes.elements.nodes[n]
                if (currentNodes.data.rowkey) {
                  cyNodeList.push(currentNodes.data.rowkey)
                }
              }
              vm.handleConfirmEdge(cyNodeList, otherRowkey)
            }
          }
        })
      },

      //关联账号和动态
      relationFun(_type) {
        let vm = this;
        vm.nodesVisible = false;
        let data = {
          primaryRowkey: this.nodesParmas.rowkey,
          objectType: _type,
          objecturi: this.nodesParmas.objecturi,
        }
        let otherRowkey = [];
        listRelationRoeKey(data).then(res => {
          if (res.status == 200) {

            let relationsData = res.data;
            let hash = {};
            const uniqueList = relationsData.reduceRight((item, next) => {
              hash[next.rowkey] ? '' : hash[next.rowkey] = true && item.push(next);
              return item
            }, []);
            let relationsAdd = {
              nodes: [],
              edges: [],
            }
            for (let i = 0; i < uniqueList.length; i++) {
              let current = uniqueList[i];
              otherRowkey.push(current.rowkey)
              let relationsObj = {
                id: '',
                group: 'nodes',
                data: {
                  id: current.rowkey,
                  displayname: current.displayName,
                  name: current.name,
                  showName: current.showName,
                  image: current.iconUrl,
                  objecttype: current.objectType,
                  objecturi: current.objectUri,
                  rowkey: current.rowkey,
                  twoway: current.twoway,
                  belongGroup:current.belongGroup
                }
              }

              let relationsEdgeObj = {
                group: 'edges',
                data: {
                  id: current.linkId,
                  source: vm.nodesParmas.rowkey,
                  target: current.rowkey,
                  name: current.linkName ? current.linkName : (current.name ? current.name : current.displayName),
                  rowkey: current.rowkey,
                  linkuri: current.linkUri,
                  endtime: current.timeEnd,
                  starttime: current.startTime,
                  twoway: current.path,
                  readOnly:current.readOnly,
                }
              }
              relationsAdd.nodes.push(relationsObj)
              relationsAdd.edges.push(relationsEdgeObj)
            }
            vm.cy.add(relationsAdd.nodes)
            vm.handleInitializeData()
            vm.cy.add(relationsAdd.edges)
            vm.handleInitializeData()
            vm.handleLayoutRun('breadthfirst')

            vm.handlenewSnapshot()
            let cyNodes = vm.cy.json();
            let cyNodeList = [];
            if (cyNodes.elements.nodes) {
              for (let n = 0; n < cyNodes.elements.nodes.length; n++) {
                let currentNodes = cyNodes.elements.nodes[n]
                if (currentNodes.data.rowkey) {
                  cyNodeList.push(currentNodes.data.rowkey)
                }
              }
              vm.handleConfirmEdge(cyNodeList, otherRowkey)
            }
          }
        })
      },

      //跳转页面
      viewObjectInfo(objectType, instanceUri, objectUri, name, displayName, icon, showName, isImportant,_belongGroup) {
        let currentUrl = window.location.href
        currentUrl = currentUrl.split('#')[0]
        let nameShow = showName || displayName
        if (objectType == 'com.scistor.object.entity') {
          currentUrl = `${currentUrl}#/display?isImportant=${isImportant}&objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
          window.open(currentUrl, '')
        } else {
          currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
          window.open(currentUrl, '')
        }
      },

      //获取连接线的关系
      handleGetRelations() {
        let vm = this;
        getOperateLinks().then(res => {
          if (res.status == 200) {
            this.getRelationList = res.data;
            if (this.disabledIswho) {
              this.createRelationTemp.linkUri ='com.scistor.link.iswho';
            }
            if (!vm.handleVerify(vm.firstToGround,vm.secendToGround)) {
              for (let i = 0; i < this.getRelationList.length; i++) {
                if (this.getRelationList[i].uri == 'com.scistor.link.iswho') {
                  this.getRelationList.splice(i,1);
                }
              }
            }
            // if (vm.targetUri != '')
            // for (let i = 0; i < this.getRelationList.length; i++) {
            //   if (this.getRelationList[i].uri == 'com.scistor.link.iswho') {
            //     this.getRelationList.splice(i,1);
            //   }
            // }
          }
        })
      },

      // 创建关系—— 选择已有与新建切换
      toggleChooseOrAddRelation: function () {
        this.vindex = this.vindex === 0 ? 1 : 0
        this.timeStart = new Date();
        this.timeEnd = new Date();
      },

      confirmCreateRelation() {
        //新建边
        let vm = this;
        if (vm.createRelationTemp.relation == '1') {
          let data = {
            'object_source_uri': vm.nodeUri,
            'object_target_uri': vm.targetUri,
            'linkDTO': {
              'id': '',
              'uri': "com.scistor.link." + vm.createRelationTemp.linkDTO.uri,
              'gid': '',
              'type': vm.createRelationTemp.linkDTO.type,
              'displayname': vm.createRelationTemp.linkDTO.displayname,
              'description': vm.createRelationTemp.linkDTO.description
            }
          }

          //创建边
          saveLinkAndRelate2Objects(data).then(res => {
            if (res.status == 200) {
              let saveData = {
                'fromRowkey': vm.firstKeyWord,
                'toRowkey': vm.secondKeyWord,
                'linkUri': "com.scistor.link." + vm.createRelationTemp.linkDTO.uri
              }
              //保存边
              saveEdge(JSON.stringify(saveData)).then(resData => {
                if (resData.status == 200) {
                  vm.showEdges = false
                  var edgeData = {
                    group: 'edges',
                    data: {
                      id: resData.data.linkId,
                      source: vm.nodeId,
                      target: vm.targetNode,
                      name: vm.createRelationTemp.linkDTO.displayname,
                      linkuri: vm.createRelationTemp.linkDTO.uri,
                      endtime: resData.data.endTime,
                      starttime: resData.data.startTime,
                      twoway: resData.data.path,
                      readOnly:resData.data.readOnly,
                    }
                  }
                  vm.cy.add(edgeData)
                  vm.handleInitializeData()
                  vm.handlenewSnapshot()
                  vm.handleCreateLint()
                  vm.addEdgesVisible = false
                }else {
                  vm.showEdges = false
                }

              }).catch(error => {
                vm.showEdges = false
              })
            }
          }).catch(error => {
            vm.showEdges = false
          })
        } else {


          let relationtxtName = this.getRelationList.find(item => {
            return item.uri == this.createRelationTemp.linkUri
          })['displayname']
          //现有边
          let hasData = {
            linkUri: vm.createRelationTemp.linkUri,
            objectSourceUri: vm.nodeUri,
            objectTargetUri: vm.targetUri
          }
          relate2Objects(hasData).then(res => {
            if (res.status == 200) {
              let saveData = {
                'fromRowkey': vm.firstKeyWord,
                'toRowkey': vm.secondKeyWord,
                'linkUri': vm.createRelationTemp.linkUri,
                "timeStart": vm.timeStart ? (vm.timeStart).getTime() :'',
                "timeEnd": vm.timeEnd?(vm.timeEnd).getTime() : ''
              }
              saveEdge(JSON.stringify(saveData)).then(resDatas => {
                if (resDatas.status == 200) {
                  vm.showEdges = false
                  var edgeData = {
                    group: 'edges',
                    data: {
                      id: resDatas.data.linkId,
                      source: vm.nodeId,
                      target: vm.targetNode,
                      name: relationtxtName,
                      linkuri: resDatas.data.linkUri,
                      endtime: resDatas.data.endTime,
                      starttime: resDatas.data.startTime,
                      twoway: resDatas.data.path,
                      readOnly:resDatas.data.readOnly,
                    }
                  }
                  vm.cy.add(edgeData)
                  vm.handleInitializeData()
                  vm.handlenewSnapshot()
                  vm.handleCreateLint()
                  vm.addEdgesVisible = false
                } else {
                  vm.showEdges = false
                }
              }).catch(error => {
                vm.showEdges = false
              })
            }

          }).catch(error=> {
            vm.showEdges = false
          })
        }


      },
    },
    created() {
      this.groupDisplayName = sessionStorage.getItem("groupDisplayName")

      if (this.$route.query.groupId) {
        this.handleGroupList()
      }
      if (sessionStorage.getItem('groupId')) {

      } else {
        if (this.$route.query.groupId) {
          this.showCaseOpacity = true;
          this.showCase = true;
          sessionStorage.setItem('groupId', this.$route.query.groupId)

          for (let i = 0; i < this.loadTreeList.length; i++) {
            let item = this.loadTreeList[i];
            if (item.id == this.$route.query.groupId) {
              this.activeNum = i
            }
          }
        }
      }

      // this.handleGetSnapshot()
      this.loadTree()
    },
  }
</script>

<style scoped>
@import "../../assets/relation.css";
</style>
